@extends('layout1')
@section('title')
    <title>{{ $blog->seo_title }}</title>
@endsection
@section('meta')
    <meta name="description" content="{{ $blog->seo_description }}">
@endsection

@section('frontend-content')
  <!--===BREADCRUMB PART START====-->
  <section class="wsus__breadcrumb" style="background: url({{ $setting->breadcrumb_image ? asset($setting->breadcrumb_image) : '' }});">
    <div class="wsus_bread_overlay">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h4>{{ __('Blog') }}</h4>
                    <nav style="--bs-breadcrumb-divider: '-';" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('Blog') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
  </section>
  <!--===BREADCRUMB PART END====-->


  <!--=====BLOG DETAILS START=====-->
  <section class="wsus__blog_details mt_45 mb_45 xs_mb_20">
    <div class="container">
      <div class="row">
        <div class="col-xl-8 col-lg-7">
          <div class="wsus__blog_det_area">
            <div class="wsus__blog_det_img">
              <img src="{{ asset($blog->image) }}" alt="blod images" class="img-fluid w-100" loading="lazy">
              <p>
                <span><i class="fal fa-user-clock"></i> {{ $blog->admin->name }}</span>
                <span><i class="fal fa-comment-alt-dots"></i> {{ $blog->comments->where('status', 1)->count() }} {{ __('Comments') }}</span>
                <span><i class="far fa-eye"></i>{{ $blog->views }} {{ __('Views') }}</span>
                </p>
            </div>
            <h3>{{ $blog->translation->title }}</h3>

            {!! clean($blog->translation->description) !!}

            <div class="wsus__blog_comment">
              <h3>{{ $blog->comments->where('status', 1)->count() }} {{ __('Comments') }}</h3>

              @foreach ($blogComments as $comment)
              <div class="wsus__single_comment">
                <div class="wsus__comm_img">
                  <img src="{{ asset($setting->default_avatar) }}" alt="comment img" class="img-fluid img-thumbnail" loading="lazy">
                </div>
                <div class="wsus__comm_text">
                  <h4>{{ $comment->name }}</h4>
                  <span>{{ $comment->created_at->format('d M Y') }}</span>
                  <p>{{ $comment->comment }}</p>
                </div>
              </div>
              @endforeach
              <div class="col-12">
                {{ $blogComments->links('custom_paginator') }}
              </div>
              <h3 class="border-0 pt-0">{{ __('Submit Comment') }}</h3>
              <form action="{{ route('blog.comment',$blog->id) }}" method="POST">
                @csrf
                <div class="row">
                  <div class="col-xl-6">
                    <input type="text" name="name" placeholder="{{ __('Name') }}">
                  </div>
                  <div class="col-xl-6">
                    <input type="email" name="email" placeholder="{{ __('Email') }}">
                  </div>
                  <div class="col-xl-12">
                    <textarea cols="3" rows="4" placeholder="{{ __('Comment') }}" name="comment"></textarea>
                    @if ($setting->recaptcha_status == 'active')
                    <p class="g-recaptcha mb-3" data-sitekey="{{ $setting->recaptcha_site_key }}"></p>
                    @endif

                    <button class="common_btn" type="submit">{{ __('Submit') }}</button>

                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-5">
          <div class="wsus__property_sidebar mb-0" id="sticky_sidebar">
            <div class="wsus__blog_search">
              <h5>{{ __('Search Blog') }}</h5>
              <form action="{{ route('blog') }}" method="GET">
                <input type="text" placeholder="{{ __('Type') }}" name="search" required>
                <button class="common_btn" type="submit"><i class="fal fa-search"></i></button>
              </form>
            </div>
            <div class="wsus__search_categoy">
              <h5>{{ __('Categories') }}</h5>
              <ul>
                @foreach ($blogCategories as $category)
                    <li><a href="{{ route('blog',['category' => $category->slug]) }}">{{ $category->translation->title }} <span>{{ $category->posts->where('status', 1)->count() }}</span></a></li>
                @endforeach

              </ul>
            </div>
            <div class="wsus__blog_post">
              <h5>{{ __('Popular Blog') }}</h5>
              <div class="row">
                @php
                    $colorId=1;
                @endphp
                @foreach ($popularBlogs as $index => $popular_blog)
                @php
                    if($index %4 ==0){
                        $colorId=1;
                    }

                    $color="";
                    if($colorId==1){
                        $color="";
                    }else if($colorId==2){
                        $color="oreangr";
                    }else if($colorId==3){
                        $color="gren";
                    }else if($colorId==4){
                        $color="blur";
                    }
                @endphp

                <div class="col-xl-12 col-md-6 col-lg-12">
                  <div class="wsus__single_blog">
                    <div class="wsus__blog_img">
                      <img src="{{ asset($popular_blog->image) }}" alt="blog items" class="img-fluid w-100" loading="lazy">
                      <span class="category {{ $color }}">{{ $popular_blog->category?->title }}</span>
                    </div>
                    <div class="wsus__blog_text">
                      <p class="blog_date">
                        <span>{{ $popular_blog->created_at->format('d') }}</span>
                        <span>{{ $popular_blog->created_at->format('m') }}</span>
                        <span>{{ $popular_blog->created_at->format('Y') }}</span>
                      </p>
                      <span class="comment"><i class="fal fa-comment-dots"></i> {{ $popular_blog->comments->where('status', 1)->count() }}</span>
                      <div class="wsus__blog_header d-flex flex-wrap align-items-center justify-content-between">
                        <div class="blog_header_images d-flex flex-wrap align-items-center w-100">
                          <img src="{{ $popular_blog->admin->image ? asset($popular_blog->admin->image) : asset($setting->default_avatar) }}" alt="bloger" class="img-fluid img-thumbnail" loading="lazy">
                          <span>{{ $popular_blog->admin->name }}</span>
                        </div>
                      </div>
                      <a href="{{ route('blog.details',$popular_blog->slug) }}" class="blog_title">{{ $popular_blog->title }}</a>
                      <p>{{ $popular_blog->translation->short_description }}</p>
                    </div>
                  </div>
                </div>

                @php
                    $colorId ++;
                @endphp
                @endforeach
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--=====BLOG DETAILS  END=====-->
@endsection
@push('js')
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endpush