@extends('web.layouts.container')

@section('content')
    <div class="page-heading">
        <div class="overlay"></div>
        <div class="container">
            <div class="text text-center">
                <h4>{{$article->title}}</h4>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">{{__('main.home_page')}}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#">{{__('articles.head')}}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{$article->title}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <section class="single-blog">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="single-blog-inner">
                        <img src="{{asset($article->image)}}">
                        <div class="card-body">
                            <div class="date">
                                <p>
                                    <b>{{date('d', strtotime($article->created_at))}}</b><br>
                                    {{date('Y M', strtotime($article->created_at))}}
                                </p>
                            </div>
                            <div class="details">
                                @php
                                    /** @var TYPE_NAME $article */
                                        $time = Carbon\Carbon::now();
                                        $time->setTimezone('Asia/Riyadh');
                                        $time = $time->timestamp(strtotime($article->created_at))
                                @endphp
                                <p><i class="far fa-user"></i>{{$article->author}}</p>
                                <p><i class="far fa-clock"></i>{{date('h:i A', strtotime($time))}}</p>
                            </div>
                            <h6 class="title">{{$article->title}}</h6>
                            <p>{!! $article->description !!}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card recent-news">
                        <h6 class="card-header">{{__('articles.latest_article')}}</h6>
                        <div class="card-body">
                            @if($relatedArticles)
                                @foreach($relatedArticles as $relatedArticle)
                                    <a href="{{ route('article.show', $relatedArticle->id) }}">
                                        <div class="item col-md-12">
                                            <img src="{{asset($relatedArticle->image)}}">
                                            <div class="text ">
                                                <h6>{{$relatedArticle->title}}</h6>
                                                <p class="date">{{date('Y M d', strtotime($relatedArticle->created_at))}}</p>
                                            </div>
                                        </div>
                                    </a>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

@endsection