@extends('frontend.layouts.app')

@section('title') {{ __($module_title) }} @endsection

@section('content')
<style>
.pagination .page-link {
    border-radius: 50%;
    margin: 0 3px;
}
</style>
<!-- ================================
    START BREADCRUMB AREA
================================= -->
    <section class="breadcrumb-area bread-bg">
      <div class="overlay"></div>
      <!-- end overlay -->
      <div class="container">
        <div class="breadcrumb-content text-center">
          <h2 class="sec__title text-white mb-3">Blog </h2>
          <ul class="bread-list">
            <li><a href="{{ url('/') }}">home</a></li>
            <li>Blog</li>
    
          </ul>
        </div>
        <!-- end breadcrumb-content -->
      </div>
      <!-- end container -->
      <div class="bread-svg">
        <svg viewBox="0 0 500 150" preserveAspectRatio="none">
          <path
            d="M-4.22,89.30 C280.19,26.14 324.21,125.81 511.00,41.94 L500.00,150.00 L0.00,150.00 Z"
          ></path>
        </svg>
      </div>
      <!-- end bread-svg -->
    </section>
    <!-- end breadcrumb-area -->
    <!-- ================================
    END BREADCRUMB AREA
================================= -->

<!-- ================================
    START BLOG AREA
================================= -->
<section class="blog-area padding-top-60px padding-bottom-70px">
  <div class="container">
    <div class="row">

      <!-- ================= LEFT SIDE (POSTS) ================= -->
      <div class="col-lg-8 mb-5">

        <div class="row">
          @foreach($posts_data as $post)
          <div class="col-lg-6 col-md-6 mb-4">
            <div class="card hover-y">

              <!-- IMAGE -->
              <a href="{{ url('blogs/'.$post->slug) }}">
                <img src="{{ asset('post_images/'.$post->featured_image) }}"
                     class="card-img-top"
                     alt="{{ $post->name }}">
              </a>

              <div class="card-body">

                <!-- TITLE -->
                <h5>
                  <a href="{{ url('blogs/'.$post->slug) }}">
                    {{ $post->name }}
                  </a>
                </h5>

                <!-- META -->
                <small>
                  {{ $post->created_at->format('d M, Y') }} |
                  {{ $post->category->name ?? $post->category_name }}
                </small>

                <!-- CONTENT -->
                <p class="mt-2">
                  {{ Str::limit(strip_tags($post->content ?? $post->intro), 100) }}
                </p>

                <!-- BUTTON -->
                <a href="{{ url('post/'.$post->slug) }}" class="btn btn-danger btn-sm">
                  Read more
                </a>

              </div>
            </div>
          </div>
          @endforeach
        </div>

        <!-- PAGINATION -->
        
            <div class="mt-4 text-center">
                {{ $posts_data->links('pagination::bootstrap-5') }}
            </div>
      </div>

      <!-- ================= RIGHT SIDEBAR ================= -->
      <div class="col-lg-4">

        <!-- SEARCH -->
        <div class="card mb-3">
          <div class="card-body">
            <h5>Search</h5>
            <form method="GET">
              <input type="text" name="search" class="form-control mb-2"
                     placeholder="Search..." value="{{ request('search') }}">
              <button class="btn btn-primary w-100">Search</button>
            </form>
          </div>
        </div>

        <!-- CATEGORIES -->
        <div class="card mb-3">
          <div class="card-body">
            <h5>Categories</h5>
            <ul>
              @foreach($categories as $cat)
              <li>
                <a href="?category={{ $cat->category_id }}">
                  {{ $cat->category_name }}
                </a>
              </li>
              @endforeach
            </ul>
          </div>
        </div>

        <!-- TAGS -->
        <div class="card mb-3">
          <div class="card-body">
            <h5>Tags</h5>
            @foreach($tags as $tag)
              <a href="?tag={{ $tag->slug }}" class="badge bg-secondary">
                {{ $tag->name }}
              </a>
            @endforeach
          </div>
        </div>

        <!-- RECENT POSTS -->
        <div class="card mb-3">
          <div class="card-body">
            <h5>Recent Posts</h5>
            @foreach($recent_data as $recent)
            <div class="mb-2">
              <img 
                                src="{{ $recent->featured_image 
                                    ? asset('post_images/'.$recent->featured_image) 
                                    : asset('images/small-img.jpg') }}"
                                alt="{{ $recent->name }}" 
                                width="80" 
                                height="80"
                                style="object-fit: cover; border-radius: 5px;"
                            >
              <a href="{{ url('post/'.$recent->slug) }}">
                {{ $recent->name }}
              </a>
            </div>
            @endforeach
          </div>
        </div>

        <!-- ARCHIVE -->
        <div class="card">
          <div class="card-body">
            <h5>Archive</h5>
            <ul>
              @foreach($archives as $archive)
              <li>{{ $archive->month }}</li>
              @endforeach
            </ul>
          </div>
        </div>

      </div>
      <!-- ================= END SIDEBAR ================= -->

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

@endsection