@extends('web.layouts.app')
@section('title') The Best Widex Hearing Center  @endsection
@section('meta_description')
  <meta property="og:title" content="{{@$seo->title}}">
    @if(@$seo->og_image)
     <meta property="og:image" content="{{asset('images/seos')}}/{{@$seo->og_image}}">
    @else
        <meta property="og:image" content="{{asset('public/web/images/Image-Edit-Expert.png')}}">
    @endif
     <meta name="description" content="{{@$seo->meta_desc}}">
     <meta name="og:url" content="{{@$seo->og_url}}">
@endsection

@section('css')
@endsection

@section('content')

    <!--=============== Blog Section ============-->
    <section class="py-5">
        <div class="container">
            <div class="row">

                @foreach($blogs as $key => $blog)
                    <div class="col-md-6 col-lg-4 mb-4">
                    <div class="blog-item border">
                        <a href="{{url('blog/'.$blog->slug)}}" class="box-ratio ratio-16x9">
                            <img src="{{asset($blog->thumbnail)}}" class="ratio-img">
                        </a>
                        <div class="p-3">
                            <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                                <div class="d-flex align-items-center mr-3">
                                    <div class="box-20 rounded-circle mr-3">
                                        <img src="{{asset('public/images/user.jpg')}}" class="img-circle">
                                    </div>
                                    <span class="text-13 text-muted">{{$blog->user->name}}</span>
                                </div>

                                <time class="text-12 font-italic text-muted text-nowrap my-2">{{$blog->created_at->format('d,M Y')}}</time>
                            </div>
                            <h5><a href="{{url('blog/'.$blog->slug)}}" class="d-block  mb-2" style="color:#2F344E;font-weight:600">{{str_limit($blog->title, 80)}} </a>
                            </h5>
                            <p class="text-muted text-13">
                                <!--{!! str_limit($blog->description, 120)  !!}-->
                            </p>
                        </div>
                    </div>
                </div>
                @endforeach

            </div>



        </div>
    </section>
    <!--============ End Blog Section =============-->

@endsection

@section('js')
@endsection