@extends('frontend.layouts.app')

@section('title') {{$module_name}} @endsection

@section('content')
<!-- ================================
    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 Details</h2>
          <ul class="bread-list">
            <li><a href="index.html">home</a></li>
            <li>Blog Details</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">

      <!-- ================= MAIN BLOG ================= -->
      <div class="col-lg-8 mb-5">
        <div class="card">

          <!-- Image -->
          <a href="#" class="card-image">
            <img
              src="{{ $post->featured_image ? asset('post_images/'.$post->featured_image) : asset('images/img1.jpg') }}"
              class="card-img-top"
              alt="{{ $post->name }}"
              style="height:400px; object-fit:cover;"
            >
          </a>

          <div class="card-body">

            <!-- Title -->
            <h4 class="card-title">
              {{ $post->name }}
            </h4>

            <!-- Meta -->
            <ul class="card-meta d-flex flex-wrap align-items-center">
              <li>By {{ $post->author ?? 'Admin' }}</li>
              <li><span class="mx-1">-</span></li>
              <li>{{ \Carbon\Carbon::parse($post->created_at)->format('d M, Y') }}</li>
              <li><span class="mx-1">-</span></li>
              <li>
                <a href="#">
                  {{ $post->category->name ?? 'General' }}
                </a>
              </li>
            </ul>

            <!-- Description -->
            <p class="card-text mt-3">
              {!! $post->description !!}
            </p>

            <!-- Extra Content -->
            @if(!empty($post->content))
              <p class="card-text mt-3">
                {!! $post->content !!}
              </p>
            @endif

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

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

          <!-- Search -->
          <div class="card">
            <div class="card-body">
              <h4 class="card-title mb-3">Search</h4>
              <input class="form-control mb-2" type="text" placeholder="Search...">
              <button class="btn btn-primary w-100">Search</button>
            </div>
          </div>

          <!-- Categories -->
          <div class="card mt-3">
            <div class="card-body">
              <h4 class="card-title mb-3">Categories</h4>
              <ul class="tag-list">
                @foreach($categories as $cat)
                  <li>
                    <a href="#">
                      {{ $cat->name }}
                    </a>
                  </li>
                @endforeach
              </ul>
            </div>
          </div>

          <!-- Popular Posts -->
          <div class="card mt-3">
            <div class="card-body">
              <h4 class="card-title mb-3">Popular Posts</h4>

              <ul class="media-list">
                @foreach($popularPosts as $key => $p)

                  <li class="media media-card {{ $key != 0 ? 'my-4' : '' }}">

                    <a href="{{ url('blogs/'.$p->slug) }}" class="me-3 d-block">
                      <img 
                        src="{{ $p->featured_image ? asset('post_images/'.$p->featured_image) : asset('images/small-img.jpg') }}"
                        width="80" height="80"
                        style="object-fit:cover;"
                        alt="{{ $p->name }}"
                      >
                    </a>

                    <div class="media-body align-self-center">
                      <h5 class="media-title mb-1">
                        <a href="{{ url('blogs/'.$p->slug) }}">
                          {{ $p->name }}
                        </a>
                      </h5>

                      <p class="font-size-15">
                        {{ \Carbon\Carbon::parse($p->created_at)->format('d M, Y') }}
                      </p>
                    </div>

                  </li>

                @endforeach
              </ul>

            </div>
          </div>

          <!-- Recent Posts -->
          <div class="card mt-3">
            <div class="card-body">
              <h4 class="card-title mb-3">Recent Posts</h4>

              <ul class="media-list">
                @foreach($recentPosts as $key => $r)

                  <li class="media media-card {{ $key != 0 ? 'my-4' : '' }}">

                    <a href="{{ url('blogs/'.$r->slug) }}" class="me-3 d-block">
                      <img 
                        src="{{ $r->featured_image ? asset('post_images/'.$r->featured_image) : asset('images/small-img.jpg') }}"
                        width="80" height="80"
                        style="object-fit:cover;"
                        alt="{{ $r->name }}"
                      >
                    </a>

                    <div class="media-body align-self-center">
                      <h5 class="media-title mb-1">
                        <a href="{{ url('blogs/'.$r->slug) }}">
                          {{ $r->name }}
                        </a>
                      </h5>

                      <p class="font-size-15">
                        {{ \Carbon\Carbon::parse($r->created_at)->format('d M, Y') }}
                      </p>
                    </div>

                  </li>

                @endforeach
              </ul>

            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>
    <!-- end cta-area -->
    <!-- ================================
    END CTA AREA
================================= -->

@endsection

@push ("after-style")

@endpush

@push ("after-scripts")
<script type="module" src="{{ asset('vendor/sharer/sharer@0.5.1.min.js') }}"></script>
@endpush