@extends('frontend.layouts.layout')

@section('title',$blog->title)
@section('description',$blog->description)
@section('keywords',$blog->keywords)
@section('img',!empty($blog->photo) ? asset('upload/img/'.$blog->photo) : asset('/images/no-photo.png'))

@section('content')
 <div class="breadcrumb-wrapper">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                @if (!empty($blog->category->parentCat->name))
                    <li class="breadcrumb-item"><a href="{{route('cat',['slug' => $blog->category->parentCat->slug, 'id' => $blog->category->parentCat->id])}}">{{$blog->category->parentCat->name}}</a></li>
                    <li class="breadcrumb-item"><a href="{{route('cat',['slug' => $blog->category->slug, 'id' => $blog->category->id])}}">{{$blog->category->name}}</a></li>
                @else
                    <li class="breadcrumb-item"><a href="{{route('cat',['slug' => $blog->category->slug, 'id' => $blog->category->id])}}">{{$blog->category->name}}</a></li>
                @endif
                    <li class="breadcrumb-item active" aria-current="page">{{$blog->title}}</li>
            </ol>
            <!-- End of .breadcrumb -->
        </nav>
    </div>
    <!-- End of .container -->
</div>
<!-- End of .breadcrumb-container -->
<!-- post-single-wrapper starts -->
<div class="post-single-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <main class="site-main">
                    <article class="post-details">
                        <div class="single-blog-wrapper">
                            <div class="post-details__social-share mt-3">
                                <ul class="social-share social-share__with-bg social-share__vertical">
                                    <li data-href="https://developers.facebook.com/docs/plugins/"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{url()->current()}}" class="fb-xfbml-parse-ignore"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="https://twitter.com/share?url={{url()->current()}}" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                </ul>
                                <!-- End of .social-share__no-bg -->
                            </div>
                            <!-- End of .social-share -->
                            {!! $blog->content !!}
                        </div>
                        <!-- End of .single-blog-wrapper -->
                    </article>
                    @if (!empty($blog->tags))
                        <div class="axil-content">
                            <ul class="tag-list-wrapper">
                                @foreach($blog->tags as $t)
                                    <li><a href="{{route('tag',['slug' => $t['slug']])}}">{{$t['name']}}</a></li>
                                @endforeach
                            </ul>
                            <!-- End of .tab-list-wrapper -->
                        </div>
                    @endif
                    <!-- End of .post-details -->
                    <div class="post-shares m-t-xs-60">
                        <ul class="social-share social-share__rectangular">
                            <li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{url()->current()}}" class="btn bg-color-facebook"><i class="fab fa-facebook-f"></i></a>
                            </li>
                            <li><a href="https://twitter.com/share?url={{url()->current()}}" target="_blank" class="btn bg-color-twitter"><i class="fab fa-twitter"></i></a>
                            </li>
                        </ul>
                    </div>
                    <!-- End of .post-shares -->
                </main>
                <!-- End of main -->
            </div>
            <!--End of .col-auto  -->
        </div>
        <!-- End of .row -->
    </div>
    <!-- End of .container -->
</div>
<script type="text/javascript">
    atOptions = {
        'key' : 'e8093932eba68142b72398a90e5dc5a0',
        'format' : 'iframe',
        'height' : 90,
        'width' : 728,
        'params' : {}
    };
</script>
<script type="text/javascript" src="//www.topcreativeformat.com/e8093932eba68142b72398a90e5dc5a0/invoke.js"></script>
<!-- End of .post-single-wrapper -->
@endsection

@section('relateBlog')
<section class="related-post p-b-xs-30">
    <div class="container">
        <div class="grid-wrapper">
            <div class="row">
                @if (!empty($relateBlog))
                    @foreach($relateBlog as $v)
                        <div class="col-lg-3 col-md-4">
                            <div class="content-block m-b-xs-30">
                                <a href="{{route('detaiBlog',['slug' => str_slug($v->title),'id' => $v->id])}}">
                                    <img src="{{!empty($v->photo) ? asset('upload/'.$v->photo) : asset('/images/no-photo.png')}}" alt="{{$v->title}}"
                                        class="img-fluid">
                                    <div class="grad-overlay"></div>
                                </a>
                                <div class="media-caption">
                                    <div class="caption-content">
                                        <h3 class="axil-post-title hover-line hover-line">
                                            <a href="{{route('detaiBlog',['slug' => str_slug($v->title),'id' => $v->id])}}">{{$v->title}}</a>
                                        </h3>
                                        <div class="caption-meta">
                                            {{date('d/m/Y H:i',strtotime($v->created_at))}}
                                        </div>
                                    </div>
                                    <!-- End of .content-inner -->
                                </div>
                            </div>
                            <!-- End of .content-block -->
                        </div>
                    @endforeach
                @endif
            </div>
            <!-- End of .row -->
        </div>
        <!-- End of .grid-wrapper -->
    </div>
    <!-- End of .container -->
</section>
<!-- End of .related-post -->
@endsection