@extends("Layouts.layout")
@section("title")
Blog details
@endsection
@section("contant")

<div class="no-bottom no-top" id="content">

  <div id="top"></div>

  <section id="subheader" class="bg-dark text-light relative jarallax">
    <img src="{{ asset('assets/images/background/2.webp') }}" class="jarallax-img" alt="">
    <div class="container relative z-2">
      <div class="row gy-4 gx-5 align-items-center">
        <div class="col-lg-12">
          <div class="spacer-double sm-hide"></div>
          <h2 class="mb-3 wow fadeInUp" data-wow-delay=".2s">{{ $blog->title }}</h2>
          <div class="border-bottom mb-3"></div>
          <ul class="crumb wow fadeInUp">
            <li><a href="/">Home</a></li>
            <li><a href="/blogs">Blog</a></li>
            <li class="active">{{ $blog->title }}</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="gradient-edge-bottom h-50"></div>
    <div class="sw-overlay"></div>
  </section>

  <section>
    <div class="container">
      <div class="row gx-5">
        <div class="col-lg-8">
          <div class="blog-read">

            <h3>{{ $blog->title }}</h3>

            <p>
              {{ $blog->description }}
            </p>

            <p class="border-top pt-3">
              {{ $blog->content }}
            </p>

            <img src="{{ asset('blogs/' . $blog->image) }}" class="w-100 rounded-1" alt="">


          </div>

          <div class="spacer-single"></div>


        </div>

        <div class="col-lg-4">
          <div class="widget widget-post">
            <h4>Popular Posts</h4>
            <ul class="de-bloglist-type-1">
              @foreach ($popularblogs as $item)
              <li class="d-flex gap-3">
                <div class="" style="width: 60px;">
                  <img class="w-100 h-100 rounded" src="{{ asset('blogs/'. $item->image) }}" alt="">
                </div>
                <div class="">
                  <a href="{{ route('blog.show', $item->id) }}">
                    <h4 class="mb-0">{{ $item->title }}</h4>
                  </a>
                  <div class="d-date">{{ $item->created_at -> format('d/m/Y') }}</div>
                </div>
              </li>
              @endforeach
            </ul>

          </div>
          
          <div class="widget widget_tags">
            <h4>Tags</h4>
            <ul>
              <li><a href="#">Panneaux solaires</a></li>
              <li><a href="#">Maintenance</a></li>
              <li><a href="#">Photovoltaïque</a></li>
              <li><a href="#">Efficacité énergétique</a></li>
              <li><a href="#">Technologie CSP</a></li>
              <li><a href="#">Énergie renouvelable</a></li>
              <li><a href="#">Solutions industrielles</a></li>
              <li><a href="#">Durabilité</a></li>
              <li><a href="#">Énergie verte</a></li>
              <li><a href="#">Innovation solaire</a></li>
            </ul>
          </div>



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

</div>

@endsection