@extends('frontend.layouts.main')
@section('content')
<section class="page-about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-about-h">Magazine </h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center">
                        <li class="breadcrumb-item text-center"><a class="breadcrumb-home"
                                href="{{url('/')}}">Home</a></li>
                        <li class="breadcrumb-item active text-center" aria-current="page">Magazine</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>
<section class="Blog-section mt-0 mb-0">
    <div class="container">
      <div class="row">
      </div>
      <div class="row justify-content-center mt-0">
        <div class="col-lg-10">
          <div class="row ">
            @foreach ($blog_list as $blog)

                <div class="col-md-4 mb-md-4 mb-3">
                    <div class="block-card-box">
                        <div class="block-card-img">
                            <!--<img src="{{ asset($blog->thumbnail)}}" class="img-fluid">-->
                           <!--<img src="{{ Storage::disk('s3')->url($blog->thumbnail) }}" class="img-fluid">-->
                           <img src="{{ s3_url($blog->thumbnail) }}" class="card-img-top">
                        </div>
                        <div class="block-card-middle p-3 pb-0">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="date-div d-flex align-items-center">
                                    <span class="icon-div">
                                        <i class="fa-solid fa-calendar-days fs-5 me-3"></i>
                                    </span>
                                    <p class="m-0 p-0 fs-12">{{date("M d Y",strtotime($blog->created_at))}}</p>
                                </div>
                                <div class="user-div d-flex align-items-center">
                                    <span class="icon-div">
                                        <i class="fa-solid fa-user fs-5 me-3"></i>
                                    </span>
                                    <p class="m-0 p-0 ps-3">{{$blog->author_name}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="block-card-content p-3">
                            <div class="log-cart-title">
                                <h5 class="fs-19 fw-bold mt-2 mb-2 description">
                                    <a href="{{route('frontend.blog-detail.index',$blog->slug)}}" class="text-dark text-decoration-none">{{strip_tags($blog->title)}}</a>
                                </h5>
                            </div>
                            <p class="m-0 p-0">{{strip_tags($blog->description)}}</p>
                        </div>
                        <div class="block-card-footer p-3">
                            <div class="d-flex align-items-center">
                                <a href="{{route('frontend.blog-detail.index',$blog->slug)}}" class="read-btn">Read more</a>
                                <span class="pl-2"><i class="fa-solid fa-arrow-right"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="col-md-12 mt-4 d-flex justify-content-center">
                {{$blog_list->links('pagination::bootstrap-4')}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection