@extends('layouts.frontend.master-2')

@section('content')
<div id="content" class="site-content">
    <div class="page-header dtable text-center header-transparent">
        <div class="dcell">
            <div class="container">
                <h1 class="page-title">Single Blog</h1>
                <ul id="breadcrumbs" class="breadcrumbs none-style">
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li><a href="{{ route('blogs') }}">Blogs</a></li>
                    <li class="active">{{ $article->title_en }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="entry-content">
    <div class="container">
        <div class="row">
            <div class="content-area col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <article class="blog-post post-box">
                    <div class="entry-media post-cat-abs">
                        <img src="{{$article->main_image('original')}}" alt="">
                        <div class="post-cat">
                            <div class="posted-in"><a>{{$article->announcement->title_en}}</a></div>
                        </div>
                    </div>
                    <div class="inner-post">
                        <header class="entry-header">
                            <div class="entry-meta">
                                <span class="posted-on">_ <a>{{ $article->created_at }}</a></span>
                                <span class="byline">_ <a class="url fn n">{{ $article->user->name }}</a></span>
                                <span class="comment-num">_ <a href="#comments">{{ $comments->count() }}
                                        Comments</a></span>
                            </div>
                            <h3 class="entry-title">{{$article->title_en}}</h3>
                        </header>
                        <div class="entry-summary the-excerpt">
                            {!! $article->description_en !!}
                        </div>
                        <div class="entry-footer clearfix">
                            <div class="tagcloud">
                                @foreach ($article->tags as $tag)
                                <a rel="tag">{{ $tag->english_name }}</a>
                                @endforeach
                            </div>
                        </div>

                        @if ( $relatedBlogs->count() > 0)
                        <div class="related-posts">
                            <h3>Related Posts</h3>
                            <div class="row">
                                @foreach ($relatedBlogs as $relatedBlog)
                                <div class="col-lg-6 col-md-6">
                                    <div class="post-box post-item">
                                        <div class="post-inner">
                                            <div class="entry-media post-cat-abs">
                                                <a href="{{ route('article.show',  $article->slug )}}"><img
                                                        src="{{$relatedBlog->main_image()}}" alt=""></a>
                                                <div class="post-cat">
                                                    <div class="posted-in">
                                                        <a>{{$relatedBlog->announcement->title_en}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="inner-post">
                                                <div class="entry-header">
                                                    <div class="entry-meta">
                                                        <span class="posted-on"><a>{{ $relatedBlog->created_at
                                                                }}</a></span>
                                                        <span class="byline">
                                                            <span class="author vcard"><a class="url fn n">{{
                                                                    $relatedBlog->user->name }}</a></span>
                                                        </span>
                                                    </div><!-- .entry-meta -->

                                                    <h5 class="entry-title">
                                                        <a class="title-link"
                                                            href="{{ route('article.show',  $article->slug )}}">{{$article->title_en}}</a>
                                                    </h5>
                                                </div><!-- .entry-header -->

                                                <div class="the-excerpt">
                                                    {!! \Str::limit($article->description_en, 40) !!}
                                                </div><!-- .entry-content -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                    </div>
                </article>

                @if ( $comments->count() > 0)
                <div id="comments" class="comments-area">
                    <h3 class="comments-title">Comments <span>({{ $comments->count() }})</span></h3>
                    <ol class="comment-list">
                        @foreach ($comments as $comment)
                        <li class="comment even thread-even comment-item">
                            <article class="comment-wrap clearfix">
                                <div class="comment-content">
                                    <div class="comment-meta">
                                        <h6 class="comment-author">{{ $comment->adder_name }}</h6>
                                        <span
                                            class="comment-time">{{\Carbon::parse($comment->created_at)->diffForHumans()}}</span>
                                    </div>
                                    <div class="comment-text">
                                        <p>{{ $comment->content }}</p>
                                    </div>
                                </div>
                            </article>
                        </li>
                        @endforeach
                    </ol>

                </div>
                @endif

                <div class="comment-respond">
                    <h3 class="comment-reply-title">Leave a comment</h3>
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <form id="ajaxFormComment" action="{{route('comment-post')}}" method="POST" class="comment-form">
                        @csrf
                        <input type="hidden" name="article_id" id="article_id" value="{{$article->id}}">
                        <p class="comment-notes"><span id="email-notes">Your email address will not be published.</span>
                            Required fields are marked <span class="required">*</span></p>
                        <div class="row">
                            <p class="comment-form-author col-md-6">
                                <input name="name" id="name" type="text" value="" size="30" placeholder="Name*" required>
                            </p>
                            <div style="color: red" id="nameError"></div>
                            <p class="comment-form-email col-md-6">
                                <input name="email" id="email" type="text" value="" size="30" placeholder="Email*" required>
                            </p>
                            <div style="color: red" id="emailError"></div>
                        </div>
                        <p class="comment-form-comment">
                            <textarea name="comment" id="comment" cols="45" rows="8" placeholder="Comment*" required></textarea>
                        </p>
                        <div style="color: red" id="commentError"></div>
                        <p><button class="octf-btn">Send Message</button></p>
                        <div id="successMessageContact" class="alert alert-success d-none" style="color: green">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')


@endsection