@extends('front.frontLayout')
@section('title',isset($blog_detail->name) ? $blog_detail->name : 'Blog Detail')
@section('pagelevelcss')
@stop
@section('content')
<section class="contact-banner blog-detail-banner">
   <div class="container">
      <div class="row align-items-center">
         <div class="col-md-6">
            <div class="banner-content">
               <h1 class="main-title">{{ isset($blog_detail->name) ? $blog_detail->name : 'Blog Detail' }}</h1>
               <ul>
                  <li>By {{ isset($blog_detail->created_by) ? $blog_detail->created_by : '' }}</li>
                  @if(isset($blog_detail->blog_category))
                     <li>{{ $blog_detail->blog_category->name }}</li>
                  @endif
                  <!-- <li>{{ isset($blog_detail->created_at) ? Carbon\Carbon::parse($blog_detail->created_at)->format('M d, Y') : '' }}</li> -->
               </ul>
            </div>
         </div>
         <div class="col-md-6 banner-img-wrapper">
         </div>
      </div>
   </div>
</section>
<section class="blog-detail section-padding" id="blog-detail-sec">
   <div class="container">
      <div class="row ">
         <div class="col-md-8">
            <div class="entry-content">
               @if(isset($blog_detail->name))
                  <img loading="lazy" class="wp-image-1021 aligncenter" src="{{ asset('uploads/'.$blog_detail->image) }}" alt="{{ $blog_detail->name }}" width="827" height="551">
                  {!! $blog_detail->description !!}
               @else
                  No data available.
               @endif
            </div>
            <div class="comment-wrap">
               <h1 id="comments" class="main-title">{{ count($comments) }} Comments</h1>
               <div class="comment-reply">
                  <ol class="commentlist clearfix">
                     <li class="comment " >
                        @foreach($comments as $value)
                           <article  class="comment-body clearfix">
                              <div class="comment_avatar">
                                 <img src="{{ asset('frontend/images/default-user.png') }}" srcset="{{ asset('frontend/images/default-user.png') }}" class="avatar avatar-80 photo" height="80" width="80" loading="lazy">
                              </div>
                              <div class="comment_postinfo">
                                 <span class="fn">{{ $value->name }}</span>
                                 <span class="comment_date"> on {{ Carbon\Carbon::parse($value->created_at)->format('M d, Y') }} at {{ Carbon\Carbon::parse($value->created_at)->format('h:m a') }}</span>
                              </div>
                              <!-- .comment_postinfo -->
                              <div class="comment_area">
                                 <em class="moderation">Your comment is awaiting moderation.</em>
                                 <br>
                                 <div class="comment-content clearfix">
                                    <p>{{ $value->discription }}</p>
                                    <span class="reply-container">
                                       <a class="comment-reply-link custom-btn" data-blog-id="{{ ($blog_detail->id) ? $blog_detail->id : '' }}" data-id="{{ $value->id }}" href="javascript:void(0);">Reply</a>
                                    </span>           
                                 </div>
                                 <!-- end comment-content-->
                              </div>
                              <!-- end comment_area-->
                           </article>
                              <div class="comment-reply-html-{{ $value->id }} comment-reply-remove-html"></div>
                              @if(count($value->sub_comment) > 0)
                                 @foreach($value->sub_comment as $sub_comment)
                                    <article  class="comment-body clearfix sub-comment-body">
                                       <div class="comment_avatar">
                                          <img src="{{ asset('frontend/images/default-user.png') }}" srcset="{{ asset('frontend/images/default-user.png') }}" class="avatar avatar-80 photo" height="80" width="80" loading="lazy">
                                       </div>
                                       <div class="comment_postinfo">
                                          <span class="fn">{{ $sub_comment->name }}</span>
                                          <span class="comment_date"> on {{ Carbon\Carbon::parse($sub_comment->created_at)->format('M d, Y') }} at {{ Carbon\Carbon::parse($sub_comment->created_at)->format('h:m a') }}</span>
                                       </div>
                                       <!-- .comment_postinfo -->
                                       <div class="comment_area">
                                          <em class="moderation">Your comment is awaiting moderation.</em>
                                          <br>
                                          <div class="comment-content clearfix">
                                             <p>{{ $sub_comment->discription }}</p>
                                          </div>
                                          <!-- end comment-content-->
                                       </div>
                                       <!-- end comment_area-->
                                    </article>
                                 @endforeach
                              @endif
                        @endforeach
                     </li>
                  </ol>
               </div>
               <div class="comment-form" id="comment-response">
                  <form class="comment-form" id="comment_form" name="comment_form" method="post" action="{{route('comment.post')}}">
                     {{ csrf_field() }}
                     <input type="hidden" id="blog_id" name="blog_id" class="form-control" value="{{ ($blog_detail->id) ? $blog_detail->id : '' }}">
                     <h2 class="h3 mb-3 main-title" style="text-align:left">Submit a Comment</h2>
                     <textarea id="discription" name="discription" class="form-control" rows="4" cols="50" placeholder="Discription*"></textarea>
                     @if((Auth::check() && auth()->user()->role == "client"))
                     @else
                     <input type="text" id="name" name="name" class="form-control" placeholder="Name*">
                     <input type="email" id="email" name="email" class="form-control" placeholder="Email*">
                     @endif
                     <input type="text" id="website" name="website" class="form-control" placeholder="Website">
                     <!-- <input type="checkbox" id="" name="" value="">
                     <label for=""> Save my name, email, and website in this browser for the next time I comment.</label> -->
                     <div class="text-left mt-3">
                        <button class="btn custom-btn " id="contact-submit" type="submit">Submit Comment</button>
                     </div>
                  </form>
               </div>
            </div>
         </div>
         <div class="col-md-4">
            <div id="sidebar-right">
               <div id="search-2" class="">
                  <form role="search" method="get" id="searchform" class="searchform" action="{{ route('blog.search') }}">
                     <label class="screen-reader-text main-title" for="s">Search for:</label>
                     <div>
                        <input type="text" class="form-control" value="" name="s" id="s" autofocus>
                        <input type="submit" id="searchsubmit" value="Search" class="custom-btn">
                     </div>
                  </form>
               </div>
               <div id="recent-posts-2" class="side-bar-recent pt-4">
                  <h4 class="main-title ">Recent Posts</h4>
                  <ul>
                     @if(count($blogs) > 0)
                        @foreach($blogs as $value)
                           <li>
                              <a href="{{ route('blog.detail', ['name_url' => $value->name_url]) }}" aria-current="page">
                                 {{ $value->name }}
                              </a>
                           </li>
                        @endforeach
                     @endif
                  </ul>
               </div>
               <div id="recent-comments-2" class="pt-4">
                  <h4 class="main-title">Recent Comments</h4>
                  <ul id="recentcomments">
                     @if(count($blog_category) > 0)
                        @foreach($comments as $val)
                           <li class="cat-item cat-item-1">
                              <a href="javascript:void(0);">{{ $val->discription }}</a>
                           </li>
                        @endforeach
                     @endif
                  </ul>
               </div>
               <div id="categories-2" class="pt-4">
                  <h4 class="main-title">Categories</h4>
                  <ul>
                     @if(count($blog_category) > 0)
                        @foreach($blog_category as $value)
                           <li class="cat-item cat-item-1">
                              <a href="{{ route('blog.search') }}?c={{ $value->name }}">{{ $value->name }}</a>
                           </li>
                        @endforeach
                     @endif
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
@endsection
@section('pageleveljs')
<script src="{{asset('frontend/js/jquery.validate.min.js')}}?v=1.0"></script>
<script type="text/javascript">
$(function(){
   $("#comment_form").validate({
      ignore: ':hidden:not(.form-control)',
      rules: {   
         name:"required",
         email:{
            required: true,
            email: true,
         },
         website:{
            required: false,
            url: true,
         },
         discription:{
            required: true,
         },
      },
      messages:{
         name: {
            required: "Please enter name.",
         },
         email: {
            required: "Please enter email.",
            email: "Please enter valid email.",
         },
         website: {
            required: "Please enter website.",
            url: "Please enter valid website.",
         },
         discription: {
            required: "Please enter discription.",
         },
      },
      errorElement: 'span',
   });
});
</script>
<script>
   var other_elements = '';
   @if((Auth::check() && auth()->user()->role == "client"))
   other_elements = '';
   @else
   other_elements = '<input type="text" id="name" name="name" class="form-control" placeholder="Name*" autofocus="">'
            +'<input type="email" id="email" name="email" class="form-control" placeholder="Email*">';
   @endif
   $(document).on("click",".comment-reply-link",function() {
      comment_id = $(this).attr('data-id');
      blog_id = $(this).attr('data-blog-id');
      $('.comment-reply-remove-html').empty();
      $('#comment-response').hide();
      $(".comment-reply-html-"+comment_id).append(
      '<div class="comment-form" id="comment-response">'
         +'<form class="comment-form" id="sub_comment_form" name="comment_form" method="post" action="{{route('comment.post')}}">'
            +'<h2 class="h3 mb-3 main-title" style="text-align:left">Submit a Comment</h2>'
            +'<a rel="nofollow" id="comment-reply-form" href="javascript:void(0);" class="comment-reply-remove">Cancel reply</a>'
            +'{{ csrf_field() }}'
            +'<input type="hidden" id="parent_comment_id" name="parent_comment_id" value="'+comment_id+'" class="form-control">'
            +'<input type="hidden" id="blog_id" name="blog_id" value="'+blog_id+'" class="form-control">'
            +'<textarea id="discription" name="discription" class="form-control" rows="4" cols="50" placeholder="Discription*"></textarea>'
            +other_elements
            +'<input type="text" id="website" name="website" class="form-control" placeholder="Website">'
            +'<div class="text-left mt-3">'
               +'<button class="btn custom-btn" id="contact-submit" type="submit">Submit Comment</button>'
            +'</div>'
         +'</form>'
      +'</div>');

      $("#sub_comment_form").validate({
         ignore: ':hidden:not(.form-control)',
         rules: {   
            name:"required",
            email:{
               required: true,
               email: true,
            },
            website:{
               required: false,
               url: true,
            },
            discription:{
               required: true,
            },
         },
         messages:{
            name: {
               required: "Please enter name.",
            },
            email: {
               required: "Please enter email.",
               email: "Please enter valid email.",
            },
            website: {
               required: "Please enter website.",
               url: "Please enter valid website.",
            },
            discription: {
               required: "Please enter discription.",
            },
         },
         errorElement: 'span',
      });
   });

   $(document).on("click",".comment-reply-remove",function() {
      $('span.error').hide();
      $('.comment-reply-remove-html').empty();
      $('#comment-response').show();
   });
</script>
@stop