@extends('layouts.main')

@section('content')
@if($tag != null)
<section class="single-categories spacing top-stories">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="top-stories-head">
                    <h2>Tag: {{$tag}}</h2>
                    <span class="titledot"></span>
                    <span class="titleline"></span>
                </div>
            </div>
            @foreach ($blogs as $blog)
                
            <div class="col-lg-3">
                <div class="top-stories-item">
                    <div class="box-image">
                        <a href="{{route('blog-detail', $blog->slug)}}"><img src="{{$blog->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                    </div>
                    <div class="box-content stories">
                        <h6>{{$blog->category->name}}</h6>
                        <h3><a href="{{route('blog-detail', $blog->slug)}}">{{$blog->name}}</a></h3>
                        <div class="box-item">
                            <ul>
                                <li>by<a href="#">{{$blog->user->name}}</a></li>
                                <li><i class="fa-regular fa-calendar-days"></i>{{$blog->getDate()}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        
       
        </div>
    </div>
</section>
@elseif ($category != null)
<section class="single-categories spacing top-stories">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="top-stories-head">
                    <h2>{{$category->name}}</h2>
                    <span class="titledot"></span>
                    <span class="titleline"></span>
                </div>
            </div>
            @foreach ($category->blogs as $blog)
                
            <div class="col-lg-3">
                <div class="top-stories-item">
                    <div class="box-image">
                        <a href="{{route('blog-detail', $blog->slug)}}"><img src="{{$blog->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                    </div>
                    <div class="box-content stories">
                        <h6>{{$category->name}}</h6>
                        <h3><a href="{{route('blog-detail', $blog->slug)}}">{{$blog->name}}</a></h3>
                        <div class="box-item">
                            <ul>
                                <li>by<a href="#">{{$blog->user->name}}</a></li>
                                <li><i class="fa-regular fa-calendar-days"></i>{{$blog->getDate()}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        
       
        </div>
    </div>
</section>
@else

    @foreach ($categories as $key=> $category)
    @if($key < 8 && $category->blogs->count() > 0)
    <section class="single-categories  {{($key % 2 == 0) ? 'spacing top-stories' : 'pt-5'}}">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="top-stories-head">
                        <h2>{{$category->name}}</h2>
                        <span class="titledot"></span>
                        <span class="titleline"></span>
                    </div>
                </div>
                @foreach ($category->blogs as $key2 => $blog)
                    @if($key2 < 4)
                <div class="col-lg-3">
                    <div class="top-stories-item">
                        <div class="box-image">
                            <a href="{{route('blog-detail', $blog->slug)}}"><img src="{{$blog->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                        </div>
                        <div class="box-content stories">
                            <h6>{{$category->name}}</h6>
                            <h3><a href="{{route('blog-detail', $blog->slug)}}">{{$blog->name}}</a></h3>
                            <div class="box-item">
                                <ul>
                                    <li>by<a href="#">{{$blog->user->name}}</a></li>
                                    <li><i class="fa-regular fa-calendar-days"></i>{{$blog->getDate()}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @endforeach
            
                <div class="col-lg-12">
                    <div class="single-categories-btn">
                        <div class="loadmore-wrap">
                            <span class="before-line"></span>
                            <a href="{{route('categories' , $category->slug)}}">View More</a>
                            <span class="after-line"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    @endforeach
@endif
@endsection

@section('css')

@endsection

@section('script')

@endsection