@extends('layouts.main')

@section('content')


<section class="single-blog spacing">
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="box-content single">
                    <h6 style="background:#ff3385">{{$blog->category->name}}</h6>
                    <h1>{{$blog->name}}</h1>
                    <div class="box-item">
                        <ul>
                            <li>by<a href="#">{{$blog->user->name}}</a></li>
                            <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$blog->getDate()}}</li>
                            <li><i class="far fa-comments ms-2"></i>0 comment</li>
                            <li><i class="fa-regular fa-clock"></i>1 minute read</li>
                            <li><i class="fas fa-signal"></i>4330 Views</li>
                            {{-- <li><i class="fa-solid fa-clock"></i>3 years ago</li> --}}
                        </ul>
                    </div>
                </div>

                <div class="single-connect">
                    <ul class="stay-content">
                        <li>
                            <ul class="social-main facebok">
                                <li>
                                    <a href="#">
                                        <div class="single-icon"><i class="fa-brands fa-facebook-f"></i></div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul class="social-main followx">
                                <li>
                                    <a href="#">
                                        <div class="single-icon"><i class="fa-brands fa-x-twitter"></i></div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul class="social-main printest">
                                <li>
                                    <a href="#">
                                        <div class="single-icon"><i class="fa-brands fa-pinterest-p"></i></div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul class="social-main dribble">
                                <li>
                                    <a href="#">
                                        <div class="single-icon"><i class="fa-brands fa-dribbble"></i></div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul class="social-main insta">
                                <li>
                                    <a href="#">
                                        <div class="single-icon"><i class="fa-brands fa-instagram"></i></div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul class="social-main youtube">
                                <li>
                                    <a href="#">
                                        <div class="single-icon"><i class="fa-brands fa-youtube"></i></div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="single-blog-img overlay">
                    <div class="blog-img">
                        <a href="#"><img src="{{$blog->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                    </div>
                </div>
                <div class="single-paragraph">
                    {!!$blog->description!!}
                </div>
            </div>
            <div class="col-lg-3">
                <div class="POPULAR  top-stories-head">
                    <h2>POPULAR NEWS</h2>
                    <span class="titledot"></span>
                    <span class="titleline"></span>
                </div>
                <div class="box-vertical-main-items POPULAR">
                    @foreach ($popularPosts as $popularPost)
                                
                            <div class="box-main-vertical Popular-absoulate">
                                <div class="box-vertical-image circle">
                                    <a href="{{route('blog-detail',$popularPost->slug)}}"><img src="{{$popularPost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                                </div>
                                <div class="box-vertical-content stories POPULAR">
                                    <h6>{{$popularPost->category->name}}</h6>
                                    <h3><a href="{{route('blog-detail',$popularPost->slug)}}">{{$popularPost->name}}</a></h3>
                                    <div class="box-item">
                                        <ul>
                                            <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$popularPost->getDate()}}</li>
                                        </ul>
                                    </div>
                                    <div class="counter">
                                        <span>1</span>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                </div>
                <div class="single-tabs">
                    <div class="footer-item top-stories-head">
                        <h4>Tags</h4>
                        <span class="titledot"></span>
                        <span class="titleline"></span>
                    </div>
                    <div class="footer-item single-tag">
                        <div class="tagcloud">
                            @foreach ($blog->tagNames() as $tag)
                        <a href="{{route('categories' , ['tag' => $tag])}}">{{$tag}}</a>
                            @endforeach


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('css')

@endsection

@section('script')

@endsection