@extends('layouts.web.app')
@section('page_title')
    {{$blog[0]->title}}
@endsection
@section('content')
    <!-- Page Title -->
    <div class="page-title-area title-img-one" style="background-image: url({{asset('uploads/page_images/'.$pages[0]->about_banner_image)}}">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="page-title-text">
                    <h2>{{$blog[0]->title}}</h2>
                    <ul>
                        <li>
                            <a href="{{route('/')}}">@lang('site.home')</a>
                        </li>
                        <li>
                            <i class="{{(app()->getLocale() == 'ar' ? 'icofont-simple-left' :  'icofont-simple-right')}}"></i>
                        </li>
                        <li>
                            <a href="{{route('blogs')}}">@lang('site.blogs')</a>
                        </li>
                        <li>
                            <i class="{{(app()->getLocale() == 'ar' ? 'icofont-simple-left' :  'icofont-simple-right')}}"></i>
                        </li>
                        <li>{{$blog[0]->title}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- Blog Details -->
    <div class="blog-details-area pt-100 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="blog-details-item">
                        <div class="blog-details-img">
                            <img src="{{asset('uploads/blog_images/'.$blog[0]->image)}}" alt="Blog Details">
                            <h2>{{$blog[0]->title}}</h2>
                            <ul>
                                <li>
                                    <i class="icofont-calendar"></i>
                                    {{ date('j-n-Y', strtotime($blog[0]->created_at)) }}
                                </li>
                                <li>
                                    <i class="icofont-user-alt-7"></i>
                                    <a href="javascript:;">@lang('site.writer')</a>
                                </li>
                            </ul>
                            <p style="color: black !important;">{!! $blog[0]->description !!}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="blog-details-item">

                        <div class="blog-details-search">

                            <h3>@lang('site.recent_posts')</h3>
                            <ul>
                                @foreach($recent_posts as $blog)
                                    <li>
                                    <img width="100" src="{{asset('uploads/blog_images/'.$blog->image)}}" alt="Blog Details">
                                    <div class="blog-details-recent">
                                        <h4>
                                            <a href="{{route('blog',['id'=>$blog->id,'slug'=>make_slug($blog->title)])}}">{{$blog->title}}</a>
                                        </h4>
                                        <ul>
                                            <li>
                                                <i class="icofont-user-alt-7"></i>
                                                <a href="javascript:;">@lang('site.writer')</a>
                                            </li>
                                            <li>
                                                <i class="icofont-calendar"></i>
                                                {{ date('M-j-Y', strtotime($blog->created_at)) }}
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Blog Details -->
@endsection