@extends('layout1')
@section('title')
    <title>{{ $seoSetting->seo_title }}</title>
@endsection
@section('meta')
    <meta name="description" content="{{ $seoSetting->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 START=====-->
  <section class="wsus__blog mt_45 mb_45">
    <div class="container">
      <div class="row">
        @if ($blogs->count() > 0)
            @php
                $colorId=1;
            @endphp
            @foreach ($blogs as $index => $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-4 col-md-6">
                <div class="wsus__single_blog">
                    <div class="wsus__blog_img">
                    <img src="{{ asset($blog->image) }}" alt="blog items" class="img-fluid w-100" loading="lazy">
                    <span class="category {{ $color }}">{{ $blog->category->title }}</span>
                    </div>
                    <div class="wsus__blog_text">
                    <p class="blog_date">
                        <span>{{ $blog->created_at->format('d') }}</span>
                        <span>{{ $blog->created_at->format('m') }}</span>
                        <span>{{ $blog->created_at->format('Y') }}</span>
                    </p>
                    <span class="comment"><i class="fal fa-comment-dots"></i> {{ $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="{{ $blog->admin->image ? asset($blog->admin->image) : asset($setting->default_avatar) }}" alt="bloger" class="img-fluid img-thumbnail" loading="lazy">
                        <span>{{ $blog->admin->name }}</span>
                        </div>
                    </div>
                    <a href="{{ route('blog.details',$blog->slug) }}" class="blog_title">{{ $blog->translation->title }}</a>
                    <p>{{ $blog->translation->short_description }}</p>
                    </div>
                </div>
                </div>
                @php
                    $colorId ++;
                @endphp
            @endforeach
            <div class="col-12 mt_20">
                {{ $blogs->links('custom_paginator') }}
            </div>
        @else
            <div class="col-12 text-center">
                <h3 class="text-danger">{{ __('Blog Not Found!') }}</h3>
            </div>
        @endif
      </div>
    </div>
  </section>
  <!--=====BLOG END=====-->

@endsection