@extends('frontend.layouts.master')

@section('meta_title', $blog?->title . ' || ' . $setting->app_name)
@section('meta_description', $blog?->seo_description)

@push('custom_meta')
<meta property="og:title" content="{{ $blog?->seo_title }}" />
<meta property="og:description" content="{{ $blog?->seo_description }}" />
<meta property="og:image" content="{{ asset($blog?->image) }}" />
<meta property="og:URL" content="{{ url()->current() }}" />
<meta property="og:type" content="website" />
@endpush

@section('header')
    @include('frontend.layouts.header-layout.three')
@endsection

@section('contents')
<section id="hero" class="hero section dark-background">
  <div id="hero-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
    <div class="carousel-item active"> <img src="{{ asset($setting?->blog_page_breadcrumb_image) }}" alt="">
      <div class="carousel-container">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb text-white">
            <li class="breadcrumb-item"><a href="#">{{ __('Home') }}</a></li>
            <li class="breadcrumb-item active  text-white" aria-current="page">{{ __('News & Media') }}</li>
          </ol>
        </nav>
        <h1 class="fw-bold hero-title fs-1">{{ __('News & Media') }}</h1>
      </div>
    </div>
    <!-- End Carousel Item --> 
    
  </div>
</section>

<!-- Main Area -->
<section class="blog__details-area space">
  <div class="container">
    <div class="blog__inner-wrap">
      <div class="row">
        <div class="col-70">
          <div class="blog__details-wrap">
            <div class="blog__details-thumb"> <img src="{{ asset($blog?->image) }}" alt="{{ $blog?->title }}"> </div>
            <div class="blog__details-content details-text">
              <div class="blog-post-meta">
                <ul class="list-wrap">
                  <li>{{ formattedDate($blog?->created_at) }}</li>
                  <!--<li> <a href="{{ route('blogs', ['category' => $blog?->category?->slug]) }}">{{ $blog?->category?->title }}</a> </li>
                  <li> <a href="javascript:;">{{ __('by') }} {{ $blog?->admin?->name }}</a> </li>-->
                </ul>
              </div>
              <h2 class="title">{{ $blog?->title }}</h2>
              <div class="blog-post-description"> {!! clean(replaceImageSources($blog?->description)) !!} </div>
              <div class="blog__details-bottom">
                <div class="row align-items-center">
                  <div class="col-md-7">
                    <div class="post-tags">
                      <ul class="list-wrap">
                        {!! $tagString !!}
                      </ul>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <div class="post-share">
                      <h5 class="title">{{ __('Share') }}:</h5>
                      <div class="social-btn style3 justify-content-md-end"> <a class="share-social" href="{{ route('single.blog', $blog?->slug) }}" data-platform="facebook"> <span class="link-effect"> <span class="effect-1"><i class="fab fa-facebook"></i></span> <span class="effect-1"><i class="fab fa-facebook"></i></span> </span> </a> <a  class="share-social" href="{{ route('single.blog', $blog?->slug) }}" data-platform="linkedin"> <span class="link-effect"> <span class="effect-1"><i class="fab fa-linkedin"></i></span> <span class="effect-1"><i class="fab fa-linkedin"></i></span> </span> </a> <a  class="share-social" href="{{ route('single.blog', $blog?->slug) }}" data-platform="twitter"> <span class="link-effect"> <span class="effect-1"><i class="fab fa-twitter"></i></span> <span class="effect-1"><i class="fab fa-twitter"></i></span> </span> </a> </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="inner__page-nav mt-20 mb-n1"> <a href="{{ $prevPost ? route('single.blog', $prevPost?->slug) : 'javascript:;' }}"
                                        class="nav-btn {{$prevPost ? '': 'disabled'}}"> <i class="fa fa-arrow-left"></i> <span><span class="link-effect"> <span class="effect-1">{{ __('Previous Post') }}</span> <span class="effect-1">{{ __('Previous Post') }}</span> </span></span> </a> <a href="{{ $nextPost ? route('single.blog', $nextPost?->slug) : 'javascript:;' }}"
                                        class="nav-btn {{$nextPost ? '': 'disabled'}}"><span><span class="link-effect"> <span class="effect-1">{{ __('Next Post') }}</span> <span class="effect-1">{{ __('Next Post') }}</span> </span></span> <i class="fa fa-arrow-right"></i> </a> </div>
            </div>
          </div>
        </div>
        <div class="col-30">
          <aside class="blog__sidebar">
            <div class="sidebar__widget">
              <h4 class="sidebar__widget-title">{{ __('Recent Posts') }}</h4>
              <div class="sidebar__post-list"> @foreach ($popular_blogs as $blog)
                <div class="sidebar__post-item">
                  <div class="sidebar__post-thumb"> 
                  <a href="{{ route('blogs', $blog?->slug) }}">
                  <img src="{{ asset($blog?->image) }}" alt="{{ $blog?->title }}"></a> </div>
                  <div class="sidebar__post-content">
                    <h5 class="title"><a href="{{ route('blogs', $blog?->slug) }}">{{ Str::limit($blog?->title, 30, '...') }}</a> </h5>
                    <span class="date"><i class="flaticon-time"></i>{{ formattedDate($blog?->created_at) }}</span> </div>
                </div>
                @endforeach </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection
@section('footer')
    @include('frontend.layouts.footer-layout.two')
@endsection