@extends('layouts.app')

@section('title', 'Blog')

@section('content')
<!-- Page wrapper for sticky footer -->
<!-- Wraps everything except footer to push footer to the bottom of the page if there is little content -->


<main class="page-wrapper">
  <!-- Page content -->
  <section class="container mt-4 mb-lg-5 pt-lg-2 pb-5">

    <!-- Page title + Layout switcher + Search form -->
    <div class="row align-items-end gy-3 mb-4 pb-lg-3 pb-1">
      <div class="col-lg-5 col-md-4">
        <h1 class="mb-2 mb-md-0">Blog</h1>
      </div>
      <div class="col-lg-7 col-md-8">
        <form action="{{ route('blog.search') }}" method="GET" class="row gy-2">
          <div class="col-lg-5 col-sm-6">

          </div>
          <div class="col-lg-7 col-sm-6">
            <div class="input-group">
              <div class="input-group">
                <input type="text" name="query" class="form-control pe-5 rounded" placeholder="Search the blog..." value="{{ request('query') }}">
                <button type="submit" class="position-absolute top-50 end-0 translate-middle-y me-3 zindex-5 fs-lg border-0 bg-transparent">
                  <i class="bx bx-search"></i>
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- Blog grid -->
    <div class="row row-cols-lg-3 row-cols-sm-2 row-cols-1 gy-md-4 gy-2">
      @foreach ($posts as $post)
      <!-- Item -->
      <div class="col pb-3">
        <article class="card border-0 shadow-sm h-100">
          <div class="position-relative">
            <a href="{{ route('blog.show', $post['slug']) }}" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
            <img src="{{$post['image']}}" class="card-img-top" alt="Image" style="height: 220px; width:100%; object-fit :cover">
          </div>
          <div class="card-body pb-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">{{$post['category']['name']}}</a>
              <span class="fs-sm text-muted">{{ $post['created_at'] }}</span>
            </div>
            <h3 class="h5 mb-0">
              <a href="{{ route('blog.show', $post['slug']) }}">{{ $post['title'] }}</a>
            </h3>
            <p> {{ $post['excerpt']}}</p>
          </div>


        </article>
      </div>
      @endforeach
    </div>
    <!-- Pagination -->
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center pt-md-4 pt-2">
        <li class="page-item {{ $pagination['prev_page_url'] ? '' : 'disabled' }}">
          <a href="{{ url()->current() }}?page={{ $pagination['current_page'] - 1 }}" class="page-link" aria-label="Previous page">
            <i class="bx bx-chevron-left mx-n1"></i>
          </a>
        </li>

        @foreach ($pagination['links'] as $link)
        <li class="page-item {{ $link['is_active'] ? 'active' : '' }} d-none d-sm-block">
          <a href="{{ $link['url'] }}" class="page-link">{{ $link['page'] }}</a>
        </li>
        @endforeach

        <li class="page-item {{ $pagination['next_page_url'] ? '' : 'disabled' }}">
          <a href="{{ url()->current() }}?page={{ $pagination['current_page'] + 1 }}" class="page-link" aria-label="Next page">
            <i class="bx bx-chevron-right mx-n1"></i>
          </a>
        </li>
      </ul>
    </nav>


  </section>

</main>

@endsection