@extends('home.layouts.index')

@section('title')
    {{ $article->title }}
@endsection


@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
<style>
    table{
        width:auto !important;
    }
    tr ,td{
        border:1px solid black;
    }
</style>
@endsection

@section('script')
<script>
    $('.answer').click(function () {
        let answer_id = $(this).attr('data-id');
        $('.replay-box[data-id="' + answer_id + '"]').slideToggle();
    })
</script>
@endsection

@section('content')
    <main class="main-wrapper">
        <!-- Start Blog Area  -->
        <div class="axil-blog-area axil-section-gap">
            <!--<div class="axil-single-post post-formate post-standard">-->
            <!--    <div class="container">-->
            <!--        <div class="content-block">-->
            <!--            <div class="inner">-->
            <!--                <div class="post-thumbnail">-->
            <!--                    <img src="{{ imageExist(env('ARTICLES_IMAGES_UPLOAD_PATH'),$article->image)}}" alt="blog Images">-->
            <!--                </div>-->
                            <!-- End .thumbnail -->
            <!--            </div>-->
            <!--        </div>-->
                    <!-- End .content-blog -->
            <!--    </div>-->
            <!--</div>-->
            <!-- End .single-post -->
            <div class="post-single-wrapper position-relative">
                <div class="container">
                    <div class="row">

                        <div class="col-lg-8 axil-post-wrapper">
                            <div class="post-heading">
                                <h2 class="title">{{ $article->title }}
                                  </h2>

                            </div>
                            <p> {!! $article->description !!}  </p>










                            <div class="axil-comment-area">
                                <h4 class="title">{{  $article->approvedComments()->count() }} نظر</h4>
                                <ul class="comment-list">
                                    @foreach($article->approvedComments()->where('parent_id','==',0)->get() as $comment)
                                    <li class="comment">
                                        <div class="comment-body">
                                            <div class="single-comment">
                                                <div class="comment-img">
                                                    <img style="  width: 86px;  height: 86px;" src="{{ imageExist(env('USER_IMAGES_UPLOAD_PATH'),$comment->User->avatar) }}"
                                                         alt="Author Images">
                                                </div>
                                                <div class="comment-inner">
                                                    <h6 class="commenter">
                                                        <a class="hover-flip-item-wrapper" href="#">
                                                            <span class="hover-flip-item">
                                                                <span data-text="{{ $comment->User->name }}">{{ $comment->User->name }}</span>
                                                            </span>
                                                        </a>
                                                    </h6>
                                                    <div class="comment-meta">
                                                        <div class="time-spent">{{ verta($comment->User->created_at)->format('d - m - Y') }}</div>
                                                        <div class="reply-edit">
                                                            <div class="reply">
                                                                <a class="comment-reply-link hover-flip-item-wrapper"
                                                                   href="#">
                                                                    <span   class="hover-flip-item answer">
                                                                        <span data-id="{{$comment->id}}" class="answer" >پاسخ</span>
                                                                    </span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="comment-text">
                                                        <p>{{ $comment->text }} </p>
                                                    </div>
                                                    <div
                                                        data-id="{{$comment->id}}"
                                                        style="right: 11px;top: 20px;position: relative;display: none"
                                                        class="replay-box">
                                                        <form
                                                            action="{{ route('home.comment_article.store',['article'=>$article->id]) }}"
                                                            method="post">
                                                            @csrf
                                                            <input
                                                                type="hidden"
                                                                name="parent_id"
                                                                value="{{$comment->id}}">
                                                            <div
                                                                class="form-group">
                                                                <label>پاسخ
                                                                    شما</label>
                                                                <textarea
                                                                    placeholder="متن پاسخ"
                                                                    class="form-control"
                                                                    name="text"></textarea>
                                                            </div>
                                                            <div
                                                                class="form-submit">
                                                                <button
                                                                    type="submit"
                                                                    name="submit"
                                                                    value="Submit"
                                                                    id="submit"
                                                                    class="axil-btn btn-bg-primary w-auto">
                                                                    ثبت
                                                                    پاسخ
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @if ( $comment->replies )
                                        <ul class="children">

                                            @include('home.comments.commentArticle',['childs' => $comment->replies])
                                        </ul>
                                        @endif
                                    </li>
                                    @endforeach

                                </ul>
                            </div>
                            <!-- End .axil-commnet-area -->

                            <!-- Start Comment Respond  -->
                            @auth
                            <div class="comment-respond">
                                <h4 class="title">نظر شما</h4>
                                <form method="post" action="{{ route('home.comment_article.store',['article'=>$article->id]) }}">
                                    @csrf
                                    <p class="comment-notes"><span id="email-notes">آدرس ایمیل شما منتشر نخواهد
                                            شد.</span></p>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label>نظر شما</label>
                                                <textarea name="text" placeholder="بنویسید ..."></textarea>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-submit">
                                                <button name="submit" type="submit" id="submit" value="Submit"
                                                        class="axil-btn btn-bg-primary w-auto">ارسال نظر</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            @else
                                <div class="review_form field_form">
                                    <div class="col-12">
                                        <div class="alert alert-danger text-center">
                                            برای ثبت کامنت به مقاله باید <a
                                                href="{{route('login')}}"><span
                                                    style="font-size: 16px; padding: 4px 25px;"
                                                    class="btn btn-primary">وارد</span></a>
                                            شوید
                                        </div>
                                    </div>
                                </div>
                            @endauth
                            <!-- End Comment Respond  -->
                        </div>
                        <div class="col-lg-4">
                            <!-- Start Sidebar Area  -->
                            <aside class="axil-sidebar-area">

                                <!-- Start Single Widget  -->

                                <!-- End Single Widget  -->
                                <!-- Start Single Widget  -->

                                <!-- End Single Widget  -->







                                <!-- Start Single Widget  -->
                                <div class="axil-single-widget mt--40 widget_tag_cloud">
                                    <h6 class="widget-title">دسته بندی ها</h6>
                                    <div class="tagcloud">
                                        @foreach($categories as $category)
                                                <a href="{{ route('home.articles.category',['category'=>$category->id]) }}">{{ $category->title }}</a>

                                        @endforeach

                                    </div>
                                </div>
                                <!-- End Single Widget  -->

                            </aside>
                            <!-- End Sidebar Area -->
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- End Blog Area  -->

        <!-- Start Related Blog Area  -->
        <div class="related-blog-area bg-color-white pb--60 pb_sm--40">
            <div class="container">
                <div class="section-title-wrapper mb--70 mb_sm--40 pr--110">
                    <span class="title-highlighter highlighter-primary mb--10"> <i class="fal fa-bell"></i>اخبار</span>
                    <h3 class="mb--25">پست های مرتبط</h3>
                </div>
                <div class="related-blog-activation slick-layout-wrapper--15 axil-slick-arrow  arrow-top-slide">
                    @foreach($articles as $article)
                    <div class="slick-single-layout">
                        <div class="content-blog">
                            <div class="inner">
                                <div class="axil-gallery-activation axil-slick-arrow arrow-between-side">
                                    <!-- Start Single Thumb  -->
                                    <div class="thumbnail">
                                        <a href="{{ route('home.article',['alias'=>$article->alias]) }}">
                                            <img src="{{ imageExist(env('ARTICLES_IMAGES_THUMBNAIL_UPLOAD_PATH'),$article->image)}}" alt="Blog Images">
                                        </a>
                                    </div>
                                    <!-- End Single Thumb  -->
                                </div>
                                <div class="content">
                                    <h5 class="title"><a href="{{ route('home.article',['alias'=>$article->alias]) }}">{{ $article->title }}</a></h5>

                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
        </div>
        <!-- End Related Blog Area  -->


    </main>

@endsection