@extends('layouts.frontend.app')

@section('content')
   
   
      <section class="module paralax paallax-3 mt-1">
        <div class="container-fluid" style="background-color: whitesmoke;">
          <div class="row">
            <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mt-4">
                          <li class="breadcrumb-item"><a href="/">Home</a></li>
                          <li class="breadcrumb-item" aria-current="page"><a href="/posts"> Post </a></li>
                          <li class="breadcrumb-item active" aria-current="page">{{ $post->title }}</li>
                        </ol>
                    </nav>
          </div>
          <!-- <h3><span style="background-color: #dc3545; border-radius: 10px; padding: 10px;">Customize Your own PC. </span></h3> --}} -->
        </div>
      </section>


      <section class="ftco-section ftco-degree-bg">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              @if(empty(Auth::user()))
                <a href="/login" class="btn btn-primary" style="color: white">Purchase this article's PDF 420Tk </a> <br><hr>
              @else
                <a href="/payment" class="btn btn-primary" style="color: white">Purchase this article's PDF 420Tk </a> <br><hr>  
              @endif
              
              
              <div class="single-page-post">
                <img class="img-responsive" src="{{ asset('storage/app/public/post/'.$post->image) }}" width="100%" height="250px" alt="" />
                <div class="top-wrapper">
                  <div class="row d-flex justify-content-between">
                    <h3 class="col-sm-12 font-weight-bold  mt-2 text-uppercase">
                      {{ $post->title}}
                    </h3>
                    <div class="desc pl-2">
                       <div class="desc">
                        <p class="text-center"><span class="text-left ">Author Name: <b>{{ $post->author }}</b></span> <span class="ml-5 text-right"> Uploaded: {{ $post->created_at->diffForHumans()}}</span></p>
                      <!--<p></p>-->
                    </div>
                    </div>
                  </div>
                </div>
                <div class="tags">
                  <br>
                  <p>Tags</p>
                  @foreach ($post->tags as $tag)
                  <button type="button" class="btn btn-outline-success">{{ $tag->name}}</button>
                  @endforeach
                </div>
                <hr>
                <div class="single-post-content" style="text-align:justify; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
                  {!! $post->body !!}
                </div>

                <div class="bottom-wrapper my-5">
                  <div class="row">
                    <div class="col-lg-4 single-b-wrap col-md-12">
                      @guest
                        <i class="fa fa-heart" aria-hidden="true"></i> {{$post->likedUsers->count() }} people like this

                          @else
                        
                    <a href="#" onclick="document.getElementById('like-form-{{$post->id}}').submit();"><i class="fa fa-heart" style="color: {{ Auth::user()->likedPosts()->where('post_id', $post->id)->count() > 0 ? 'red' : '' }}" aria-hidden="true"></i></a>
                          {{$post->likedUsers->count() }} people like this
                        <form action="{{ route('post.like',$post->id) }}" method="POST" id="like-form-{{$post->id}}" style="display: none">
                          @csrf
                        </form>

                      @endguest
                    </div>
                    <div class="col-lg-4 single-b-wrap col-md-12">
                      <i class="fa fa-eye" aria-hidden="true"></i> {{$post->view_count}}
                      views
                    </div>
                    <div class="col-lg-4 single-b-wrap col-md-12">
                      <i class="fa fa-comment" aria-hidden="true"></i> {{$post->comments->count()}}
                      comments
                    </div>
                  </div>
            </div>

                                        <!-- Start comment-sec Area -->
                                        <section class="comment-sec-area pt-80 pb-80">
                                          <div class="container">
                                            <div class="row flex-column">
                                              <br />
                                              <!-- Frist Comment -->
                                              <div class="comment">
                                                @foreach ($post->comments as $comment)
                                                <div class="comment-list">
                                                  <div
                                                    class="single-comment justify-content-between d-flex"
                                                  >
                                                    <div class="user justify-content-between d-flex">
                                                      <div class="thumb">

                                                        @if($comment->user->role_id == 4)
                                                        <img src="{{$comment->user->image}}" class="mr-3" width="50px" alt="" />
                                                        @else

                                                        <img src="{{asset('storage/app/public/user/'.$comment->user->image)}}" class="mr-3" width="50px" alt="" />
                                                        @endif


                                                        {{-- <img src="" width="50px" alt="" /> --}}
                                                      </div>
                                                      <div class="desc">
                                                        <h5><a href="#" style="color: green">{{$comment->user->name}}</a></h5>
                                                        <p class="date" style="font-size: 12px;">{{$comment->created_at->format('D, d M Y H:i')}}</p>
                                                        <p class="comment">
                                                        {{$comment->comment}}
                                                        </p>
                                                      </div>
                                                    </div>
                                                    <div class="">
                                                      <button class="btn-reply text-uppercase" id="reply-btn" 
                                                    onclick="showReplyForm('{{$comment->id}}','{{$comment->user->name}}')">reply </button
                                                      >
                                                    </div>
                                                  </div>
                                                </div>
                                                @if($comment->replies->count() > 0)
                                                  @foreach ($comment->replies as $reply)
                                                  <div class="comment-list left-padding">
                                                    <div
                                                      class="single-comment justify-content-between d-flex"
                                                    >
                                                      <div class="user justify-content-between d-flex">
                                                        <div class="thumb">

                                                          @if($comment->user->role_id == 4)
                                                          <img src="{{$comment->user->image}}" class="mr-3" width="50px" alt="" />
                                                          @else
                                                          <img src="{{asset('storage/app/public/user/'.$comment->user->image)}}" class="mr-3" width="50px" alt="" />
                                                          @endif
                                                        </div>
                                                        <div class="desc">
                                                          <h5><a href="#" style="color: green">{{$reply->user->name}}</a></h5>
                                                          {{-- <p class="date">{{$reply->created_at->format('D, d M Y H:i')}}</p> --}}
                                                          <p class="comment">
                                                            {{$reply->message}}
                                                          </p>
                                                        </div>
                                                      </div>
                                                      <div class="">
                                                        <button class="btn-reply text-uppercase" id="reply-btn" 
                                                          onclick="showReplyForm('{{$comment->id}}','{{$reply->user->name}}')">Reply</button
                                                        >
                                                      </div>
                                                    </div>
                                                  </div>
                                                  @endforeach
                                                @else
            
                                                @endif
                                                <div class="comment-list left-padding" id="reply-form-{{$comment->id}}" style="display: none">
                                                  <div
                                                    class="single-comment justify-content-between d-flex"
                                                  >
                                                    <div class="user justify-content-between d-flex">
                                                      <div class="thumb">
                                                        <img src="img/asset/c2.jpg" alt="" />
                                                      </div>
                                                      <div class="desc">
                                                        {{-- <h5><a href="#">Goerge Stepphen</a></h5>
                                                        <p class="date">December 4, 2017 at 3:12 pm</p> --}}
                                                        <div class="row flex-row d-flex">
                                                        <form action="{{route('reply.store',$comment->id)}}" method="POST">
                                                          @csrf
                                                          <div class="col-lg-12">
                                                            <textarea
                                                              id="reply-form-{{$comment->id}}-text"
                                                              cols="60"
                                                              rows="2"
                                                              class="form-control mb-10"
                                                              name="message"
                                                              placeholder="Messege"
                                                              onfocus="this.placeholder = ''"
                                                              onblur="this.placeholder = 'Messege'"
                                                              required=""
                                                            ></textarea>
                                                          </div>
                                                          <button type="submit" class="btn-reply text-uppercase ml-3">Reply</button>
                                                        </form>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                                @endforeach
            
                                              </div>
            
                                            </div>
                                          </div>
                                        </section>
                                        <!-- End comment-sec Area -->
                        
                                        <!-- Start commentform Area -->
                                  <section class="commentform-area pb-120 pt-80 mb-100">
                                        @guest
                                        <div class="container">
                                          <h4>Please <a href="/login"> Log in </a> for Comment</h4>
                                        </div>
                                        @else
                                      
                                          <div class="container">
                                            <h5 class="text-uppercas pb-50">Leave a Reply</h5>
                                            <div class="row flex-row d-flex">
                                          
                                              <div class="col-lg-12">
                                                <form action="{{ route('comment.store', $post->id) }}" method="POST">@csrf
                                                <textarea
                                                  class="form-control mb-10"
                                                  name="comment"
                                                  placeholder="Messege"
                                                  onfocus="this.placeholder = ''"
                                                  onblur="this.placeholder = 'Messege'"
                                                  required=""
                                                ></textarea>
                                                <button type="submit" class="btn btn-success mt-3" href="#">Comment</button>
                                              </form>
                                              </div>
            
                                            </div>
                                          </div>
                                      
                                        @endguest
                                  </section>
                              <!-- End commentform Area -->
  
  
              </div>
            </div>


            @include('layouts.frontend.partials.sidebar')

          </div>
        </div>
      </section> <!-- .section -->






      <div class="container-fluid bg-success p-3">
        <div class="container text-center">
            <h5 class="text-light font-weight-bold text-uppercase"> if any query fell free to contact us </h5>
            <h4 class="text-light font-weight-bold ">Call : &nbsp;<span class="icon-phone2"></span> (+880) 1824 570690 &nbsp;&nbsp;&nbsp; & &nbsp;&nbsp;&nbsp;Email : &nbsp;<span class="icon icon-envelope"></span> info@aeaw.net</h4>
        </div>
    </div>









@endsection
@push('footer')
<script type="text/javascript">
  function showReplyForm(commentId,user) {
    var x = document.getElementById(`reply-form-${commentId}`);
    var input = document.getElementById(`reply-form-${commentId}-text`);

    if (x.style.display === "none") {
      x.style.display = "block";
      input.innerText=`@${user} `;

    } else {
      x.style.display = "none";
    }
  }

  </script>
@endpush