@extends('frontend.layouts.master')
@section('meta')
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name='copyright' content=''>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="keywords" content="">
	<meta name="description" content="{{$post->summary}}">
	{{-- <meta property="og:url" content="{{route('blog-detail',$post->slug)}}"> --}}
	<meta property="og:type" content="article">
	<meta property="og:title" content="{{$post->title}}">
	<meta property="og:image" content="{{$post->photo}}">
	<meta property="og:description" content="{{$post->description}}">
@endsection
@section('title') {{$post->title}} @endsection
@section('main-content')
@include('frontend.layouts.notification')

<!-- Start Page Title Area -->
<div class="page-title-area">
   <div class="d-table">
       <div class="d-table-cell">
           <div class="container">
               <div class="page-title-content">
                   <h2>{{$post->title}}</h2>
                   <ul>
                       <li><a href="{{route('home')}}">Home</a></li>
                       <li> Blog</li>
                   </ul>
               </div>
           </div>
       </div>
   </div>
</div>
<!-- End Page Title Area -->

<!-- Start Blog Details Area -->   
<section class="blog-details-area ptb-100">
   <div class="container">
       <div class="row">
           <div class="col-lg-8 col-md-12">
               <div class="blog-details-desc">
                   <div class="article-image">
                       <img src="{{ Storage::url($post->photo) }}" alt="image">
                   </div>
                   <div class="article-content">
                       <div class="entry-meta">
                           <ul>
                               <li>
                                   <span>Posted On:</span> 
                                   <a>{{$post->created_at->format('d M , Y. D')}}</a>
                               </li>
                           </ul>
                       </div>

                       <h3>{{$post->title}}</h3>
                       <blockquote class="wp-block-quote">
                           <p>{!! ($post->quote) !!}</p>
                       </blockquote>
                       
                       <p>{!! ($post->description) !!}</p>
                       
                   </div>
               </div>
           </div>

           <div class="col-lg-4 col-md-12">
         <aside class="widget-area" id="secondary">

            <section class="widget widget_huruma_posts_thumb">
               <h3 class="widget-title">Popular Posts</h3>
               @foreach($recent_posts as $post)
                    <article class="item">
                        <a href="{{route('blog.detail',$post->slug)}}" class="thumb">
                            <img src="{{ Storage::url($post->photo) }}" alt="{{ Storage::url($post->photo) }}">
                        </a>
                        <div class="info">
                            <time datetime="2019-06-30">{{$post->created_at->format('d M , Y. D')}}</time>
                            <h4 class="title usmall">
                                <a href="{{route('blog.detail',$post->slug)}}">
                                    {{$post->title}}
                                </a>
                            </h4>
                        </div>

                        <div class="clear"></div>
                    </article>
                @endforeach
            </section>

            <section class="widget widget_categories">
               <h3 class="widget-title">Categories</h3>

               <ul>
                    @foreach($categories as $cat)
                    <li>
                        <a href="{{route('blog.category',$cat['slug'])}}" class="d-flex">
                                <p>{{$cat['title']}} ({{$cat['posts_count']}})</p>
                        </a>
                    </li>
                    @endforeach
               </ul>
            </section>

            <section class="widget widget_tag_cloud">
               <h3 class="widget-title">Tags</h3>

               <div class="tagcloud">
                    @foreach($dtags as $tag)
                        <a href="{{route('blog.tag',$tag)}}">{{$tag}}</a>
                    @endforeach
               </div>
            </section>
         </aside>
      </div>
       </div>
   </div>
</section>
<!-- End Blog Details Area -->

@endsection
@push('styles')
<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5f2e5abf393162001291e431&product=inline-share-buttons' async='async'></script>
@endpush
@push('scripts')
<script>
$(document).ready(function(){

(function($) {
    "use strict";

    $('.btn-reply.reply').click(function(e){
        e.preventDefault();
        $('.btn-reply.reply').show();

        $('.comment_btn.comment').hide();
        $('.comment_btn.reply').show();

        $(this).hide();
        $('.btn-reply.cancel').hide();
        $(this).siblings('.btn-reply.cancel').show();

        var parent_id = $(this).data('id');
        var html = $('#commentForm');
        $( html).find('#parent_id').val(parent_id);
        $('#commentFormContainer').hide();
        $(this).parents('.comment-list').append(html).fadeIn('slow').addClass('appended');
      });

    $('.comment-list').on('click','.btn-reply.cancel',function(e){
        e.preventDefault();
        $(this).hide();
        $('.btn-reply.reply').show();

        $('.comment_btn.reply').hide();
        $('.comment_btn.comment').show();

        $('#commentFormContainer').show();
        var html = $('#commentForm');
        $( html).find('#parent_id').val('');

        $('#commentFormContainer').append(html);
    });

})(jQuery)
})
</script>
@endpush