<?php echo $header; ?>
<?php echo $fulltop; ?>
<div class="container g-pt-100 g-pb-70">
  <div class="row"><?php echo $column_left; ?>
    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
	
             <article class="g-mb-10 g-bg-white">
              <figure class="g-pos-rel">
			  <?php if($main_thumb && $blogsetting_post_thumb){ ?>
                <img class="img-fluid w-100 g-rounded-3 g-mb-20" src="<?php echo $blogsetting_post_thumb; ?>" alt="<?php echo $heading_title; ?>">
				<?php } ?>
              </figure>

              <div class="g-pos-rel px-4">
                <ul class="d-flex justify-content-start align-items-end list-inline g-color-gray-dark-v5 g-font-size-13 g-mt-minus-45 g-mb-20">
                  <li class="list-inline-item mr-3">
                    <img class="g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-white rounded-circle mb-2" src="<?php echo $blogsetting_post_thumb; ?>" alt="Image description">
                    <?php if($post_author_status){ ?>
					<h4 class="h6 g-font-weight-600 mb-0">
                        <a class="g-color-gray-dark-v4" href="#!"><?php echo $author; ?></a>
                      </h4>
                  </li>
				  <?php } ?>
				  <?php if($post_date_added_status){ ?>
                  <li class="list-inline-item">
                    <span class="g-font-size-13"><?php echo $date_added_full; ?></span>
                  </li>
				  <?php } ?>
				  <?php if($post_page_view_status){ ?>
                  <li class="list-inline-item ml-auto">
                    <a class="u-link-v5 g-color-gray-dark-v5">
                      <i class="align-middle mr-1 fa fa-eye"></i>
                    </a>
                    <span class="g-color-gray-dark-v5"><?php echo $new_read_counter_value; ?></span>
                  </li>
				  <?php } ?>
				  <?php if($post_comments_count_status){ ?>
                  <li class="list-inline-item ml-3">
                    <a class="u-link-v5 g-color-gray-dark-v5">
                      <i class="align-middle mr-1 fa fa-comments-o"></i>
                    </a>
                    <span class="g-color-gray-dark-v5"><?php echo $comment_total; ?></span>
                  </li>
				  <?php } ?>
                </ul>
                </div>
				<div class="g-px-20 g-pb-30">
                <h2 class="g-font-size-16 g-font-weight-600">
                    <a class="u-link-v5 g-color-black"><?php echo $heading_title; ?></a>
                  </h2>

                <p><?php echo $description; ?></p>

				<?php if ($tags) { ?>
                 <ul class="u-list-inline">
				 <?php for ($i = 0; $i < count($tags); $i++) { ?>
				 <?php if ($i < (count($tags) - 1)) { ?>
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-main g-brd-around g-brd-gray-light-v3 g-bg-gray-dark-v2--hover g-brd-gray-dark-v2--hover g-color-white--hover g-rounded-50 g-py-4 g-px-15" href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>
                    </li>
					<?php } else { ?>
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-main g-brd-around g-brd-gray-light-v3 g-bg-gray-dark-v2--hover g-brd-gray-dark-v2--hover g-color-white--hover g-rounded-50 g-py-4 g-px-15" href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>
                    </li>
					<?php } ?>
					<?php } ?>
                  </ul>
				  <?php } ?> 
              </div>
            </article>	
			
                 <!-- Nav tabs -->
                  <ul class="nav u-nav-v4-1" role="tablist" data-target="nav-4-1-default-hor-left" data-tabs-mobile-type="slide-up-down" data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <?php if ($related_blogs) { ?>
					<li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-4-1-default-hor-left--1" role="tab"><?php echo $text_related_blog; ?></a>
                    </li>
					<?php } ?>  
					<?php if ($products) { ?>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-4-1-default-hor-left--2" role="tab"><?php echo $text_related_products; ?></a>
                    </li>
					<?php } ?>  
					<?php if($allow_comment){ ?>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-4-1-default-hor-left--3" role="tab"><?php echo $text_comments; ?></a>
                    </li>
					<?php } ?>  
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-4-1-default-hor-left" class="tab-content g-pt-20">
					
					
					
				  <?php if ($related_blogs) { ?>
                    <div class="tab-pane fade show active" id="nav-4-1-default-hor-left--1" role="tabpanel">
              <div class="row">
			  <?php foreach ($related_blogs as $blog) { ?>
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-3">
                    <figure class="g-pos-rel">
					<?php if(($blog['image']) && ($rel_thumb_status)){ ?>
                      <img class="img-fluid w-100" src="<?php echo $blog['image']; ?>" alt="<?php echo $blog['title']; ?>">
					  <?php } ?>   
                      <?php if($date_added_status){ ?>
                      <figcaption class="g-pos-abs g-top-20 g-left-20">
                        <span class="u-label g-bg-purple g-color-white rounded-0"><?php echo $blog['date_added_full']; ?></span>
                      </figcaption>
					  <?php } ?>   
                    </figure>

                    <div class="g-pa-20">
                      <h3 class="g-font-size-14 g-font-weight-600 g-mb-15">
                        <a class="u-link-v5 g-color-main" href="<?php echo $blog['href']; ?>"><?php echo $blog['title']; ?></a>
                      </h3>

                      <div class="g-mb-30">
                        <p><?php echo $blog['short_description']; ?></p>
                      </div>

                      <div class="media g-font-size-12">
					  <?php if($author_status){ ?>
                        <div class="media-body align-self-center text-uppercase">
                          <a class="u-link-v5 g-color-main"><?php echo $blog['author']; ?></a>
                        </div>
                        <?php } ?> 
                        <div class="align-self-center">
						<?php if($page_view_status){ ?>
                          <a class="u-link-v5 g-color-main g-mr-10">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            <?php echo $blog['count_read']; ?>
                          </a>
						  <?php } ?> 
						  <?php if($comments_count_status){ ?>
                          <a class="u-link-v5 g-color-main">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            <?php echo $blog['comment_total']; ?>
                          </a>
						  <?php } ?> 
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
				<?php } ?>   
              </div>
            </div>			  
	    <?php } ?>
	 <!-- Related Blog End --> 					
					
					 <?php if ($products) { ?>
                    <div class="tab-pane fade" id="nav-4-1-default-hor-left--2" role="tabpanel">
    <!-- Related Products -->
              <div class="row">
                <?php foreach ($products as $product) { ?>
                <div class="col-sm-6 col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-block-hover u-shadow-v11">
                    <div class="g-pos-rel">
                      <!-- Figure Image -->
                      <img class="w-100" src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>">
                      <!-- End Figure Image -->

                      <!-- Figure Add to Cart -->
                      <figcaption>
                        <div class="g-z-index-2 g-pos-abs g-top-15 g-right-15">
                          <a class="g-color-black g-color-primary--hover g-font-size-16 g-text-underline--none--hover rounded" href="#!">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </div>
                      </figcaption>
                      <!-- End Figure Add to Cart -->
                    </div>

                    <!-- Figure Content -->
                    <div class="g-px-15 g-py-20">
                      <header class="d-flex justify-content-between">
                        <h4 class="g-font-size-15">
                          <a class="g-color-main g-text-underline--none--hover" href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
                        </h4>
                      </header>
                      <ul class="list-unstyled g-color-red g-font-size-12 g-mb-5">
                        <li class="d-block">
              <?php if ($product['price']) { ?>
              <p class="price">
                <?php if (!$product['special']) { ?>
                <?php echo $product['price']; ?>
                <?php } else { ?>
                <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
                <?php } ?>
                <?php if ($product['tax']) { ?>
                <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
                <?php } ?>
              </p>
              <?php } ?>
                        </li>
                      </ul>
                    </div>
                    <!-- End Figure Content -->
                  </figure>
                  <!-- End Figure -->
                </div>
				<?php } ?>
              </div>
	 <!-- Related Products End -->
		</div>
		<?php } ?>					
					
					
					<?php if($allow_comment){ ?>
                    <div class="tab-pane fade" id="nav-4-1-default-hor-left--3" role="tabpanel">
					<div class="g-pa-20 g-brd-around g-brd-gray-light-v4 g-bg-white g-rounded-4">
              <form id="comment_form">
                <div id="comment"></div>
                <h3 class="h6 g-color-black g-font-weight-600 text-uppercase g-mb-30"><i class="fa fa-pencil g-mr-10"></i><?php echo $text_write_comment; ?></h3>
				
				<div class="form-group required">
                <label class="control-label" for="input-name"><?php echo $entry_name; ?></label>
                <input type="text" name="name" value="" id="input-name" class="form-control" />
                </div>
				
                <div class="form-group required">
                <label class="control-label" for="input-email"><?php echo $entry_email; ?></label>
                <input type="text" name="email" value="" id="input-email" class="form-control" />
                </div>
                
                <div class="form-group required">
                <label class="control-label" for="input-review"><?php echo $entry_comment; ?></label>
                <textarea name="comment" rows="5" id="input-comment" class="form-control"></textarea>
                </div>
                
                
                  <div class="form-group required">
                  <label class="control-label" for="input-captcha_comment"><?php echo $entry_captcha; ?></label>
                    <div class="input-group">
                    <span class="input-group-addon captcha_wrap" style="background:#ffffff;padding:0 10px;"><img src="index.php?route=blog/blog/captcha" alt="" id="captcha_comment" /></span>
                    <input type="text" name="captcha_comment" value="" id="input-captcha_comment" class="form-control" />
                    </div>
                  </div>
                
                <div class="form-group text-right">
                <button type="button" id="button-comment" class="btn btn-primary"><?php echo $button_send; ?></button>
                </div>
				</form>
                    </div>
					</div>
					<?php } ?>
                  <!-- End Tab panes -->
				  </div>
                  

      <?php echo $content_bottom; ?></div>
    <?php echo $column_right; ?></div>
</div>
                  <script  src="catalog/view/assets/js/components/hs.tabs.js"></script>
                  <script >
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
				  
<script type="text/javascript"><!--

$('#comment').delegate('.pagination a', 'click', function(e) {
  e.preventDefault();
	$("html,body").animate({scrollTop:(($("#comment").offset().top)-50)},500);
    $('#comment').fadeOut(50);

    $('#comment').load(this.href);

    $('#comment').fadeIn(500);
	
});

$('#comment').load('index.php?route=blog/blog/comment&blog_id=<?php echo $blog_id; ?>');
//--></script>

<script type="text/javascript"><!--

$('#button-comment').on('click', function() {
	$.ajax({
		url: 'index.php?route=blog/blog/write&blog_id=<?php echo $blog_id; ?>',
		type: 'post',
		dataType: 'json',
		data: $("#comment_form").serialize(),
		
		complete: function() {
			$('#button-comment').button('reset');
			$('#captcha_comment').attr('src', 'index.php?route=blog/blog/captcha#'+new Date().getTime());
			$('input[name=\'captcha_comment\']').val('');
		},
		success: function(json) {
			$('.alert-success, .alert-danger').remove();
			
			if (json['error']) {
				$('#comment').after('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}
			
			if (json['success']) {
				$('#comment').after('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');
				
				$('input[name=\'name\']').val('');
				$('input[name=\'email\']').val('');
				$('textarea[name=\'comment\']').val('');
				$('input[name=\'captcha_comment\']').val('');
			}
		}
	});
});    
</script>
<?php echo $copyright; ?>
<?php echo $fullbottom; ?>
<?php echo $footer; ?> 