@extends('front.partials.front')

@section('content')



<section class="about-us-hero">
    <div class="container">
        <div class="au-hero-text">
            <h1>Blog</h1>
            @include('/front/partials/search')
            <div class="ts-wrapper">
                <ul>

                    @foreach ($categories as $category)
                    <li>
                        <a href="{{ url('category',$category->slug) }}">
                            <img src="{{ Storage::disk('public')->url('category/'.$category->image) }}" alt="Angular topic logo">
                            <span class="ts-blog-categories-title"> {{ $category->name }} </span>
                        </a>
                    </li>
                    @endforeach

                </ul>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Accueil</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Blog</li>
                </ol>
            </nav>
        </div>
    </div>
</section>

<section class="recent-blog2 p-top-60">
    <h3>Blog</h3>
    <h1>Nos articles</h1>
    <div class="container">
        <div class="row">
            @foreach ($posts as $post)
                @if($post->status == true)
                <div class="col-md-6">
                    <div class="recent-blog-img">
                        <img src="{{ Storage::disk('public')->url('post/'.$post->image) }}" alt="">
                        <div class="rb2-text wow fadeInLeft" data-wow-delay=".3s">
                            @foreach ($post->categories as $category)
                            <h4>{{$category->name}}</h4>

                                    @endforeach
                            <h2>{{$post->title}}</h2>
                            <p>This post covers general clean coding guidelines for naming and using variables & functions, as well as some JavaScript specific clean coding best practices... </p>
                            <a href="">Read More</a>
                        </div>
                    </div>
                </div>
                @endif
            @endforeach

        </div>
    </div>

</section>






<div class="intro-one">
    <div class="intro-one--contents" style="background-image: linear-gradient(to right bottom, rgba(14, 5, 76, 0.8),rgba(14, 5, 76, 0.8)), url('./front/img/bgg.jpg'); background-repeat: no-repeat; background-size: cover;background-position: center;">
        <div class="container">
            <div class="row justify-content-center  m-top-10">
                <div class="col-md-8 col-sm-12">
                    <p class="m-auto mb-0 title-white text-center primary-ts-color" style="margin-bottom: 10px !important">BLOG</p>
                    <h1 class="display-3 title-white size-3 text-center">What's New</span></h1>
                    <p class="title-white text-center">Welcome! Here you'll find our top guides and resources to
                        help you learn new technology the right way. Enjoy!</p>


                    @include('/front/partials/search')
                </div>

                <div class="col-lg-12 col-sm-12 m-top-80">
                    <div class="ts-blog-categories">
                        <div class="ts-wrapper">
                            <ul>

                                @foreach ($categories as $category)
                                <li>
                                    <a href="{{ url('category',$category->slug) }}">
                                        <img src="{{ Storage::disk('public')->url('category/'.$category->image) }}" alt="Angular topic logo">
                                        <span class="ts-blog-categories-title"> {{ $category->name }} </span>
                                    </a>
                                </li>
                                @endforeach

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<section class="blog-grid-wrapper section-padding ">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 m-bottom-100">
                <div class="divider section-title-simple ">
                    <img src='{{ asset("front/img/svg/labs.png") }}' style="width: 30px" />
                    <h1 class="">Latest blogs </h1>
                    <p class="m-auto mb-0 text-center primary-ts-color">Tutorials, guides and expert knowledge
                        on web development.</p>
                </div>
            </div>
        </div>
        <div class="row">

            @foreach ($posts as $post)
            @if($post->status == true)
            <div class="col-lg-4 col-md-6">
                <div class="card post--card post--card-item shadow-sm" style="border-radius: 1rem;">
                    <figure>
                        <a href="/blog/{{$post->slug}}">
                            <div class="row justify-content-center">
                                <div class="col-3">
                                    @foreach ($post->categories as $category)
                                    <img src="{{ Storage::disk('public')->url('category/'.$category->image) }}" class="m-top-10" alt="Angular topic logo">
                                    @endforeach
                                    <!-- <img src="{{ Storage::disk('public')->url('post/'.$post->image) }}" alt=""> -->
                                </div>
                                <div class="col-9">
                                    <h4 class="title-white">{{$post->title}}</h4>
                                </div>
                            </div>
                        </a>
                    </figure>
                    <div class="card-body">
                        <ul class="post-meta d-flex">
                            <li>
                                <img src="{{ asset('front/img/team1.jpg') }}" style="width: 24.7px; border-radius: 100px;margin-right: 6px;" alt="">
                                <span>{{ $post->admin->name }}</span>
                            </li>
                            <li>{{ $post->created_at->toFormattedDateString() }}</li>
                        </ul>
                        <h6 class="color-gray"><a href="">{{$post->title}}</a></h6>
                        <!-- <p>
                            {!! str_limit($post->body, $limit = 80, $end = '...') !!}

                        </p> -->
                    </div>
                </div>
            </div>
            @endif
            @endforeach

        </div>
        {{ $posts->links() }}
        <!-- <div class="m-top-20">
            <div class="pagination-area">
                <nav aria-label="Page navigation pagination-left">
                    <ul class="pagination justify-content-center">
                        <li class="page-item"><a class="page-link btn-previous" href="#">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item active"><a class="page-link" href="#">3 <span class="sr-only">(current)</span></a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item"><a class="page-link btn-next" href="#">Next</a></li>
                    </ul>
                </nav>
            </div>

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










@endsection