<x-main.header />

<main class="shop-main">
    <section class="banner-inner" style="background-image: url({{ asset('storage/images/'.$banner->banner_image) }});">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-11 col-12">
                    <div class="banner-txt">
                        <div class="col-lg-7 col-12 pe-lg-5">
                            <h1 class="theme-h1">{!! $banner->banner_description !!}</h1>
                            <ul>
                                <li><a href="{{ url('/') }}">Home</a></li>
                                <li>{{ $data->post_heading }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="blogs-sec sec-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-11 col-12">
                	@if(!Empty($data->postcategory_id))
                    <h6 class="theme-h6">Blog</h6>
                    @else
                    <h6 class="theme-h6">UnCategorized</h6>
                    @endif
                    <div class="img-blog">
                        <img class="img-fluid" src="{{ asset('storage/images/'.$data->post_image) }}" alt="">
                    </div>
                    {!! $data->post_long_descruption !!}
                    <div class="row justify-content-center w-100" id="commentlist">
                        <div class="col-lg-9 col-12">
                            <div class="comment-box">
                                <form id="comment-form">
                                	@csrf
                                    <div class="input-field">
                                    	<input type="hidden" name="postId" id="postId" value="{{ $data->post_id }}" readonly>
                                        <textarea name="Comment" id="Comment" placeholder="Your Comment Here..."></textarea>
                                        <button type="submit" class="theme-btn">Post</button>
                                    </div>
                                </form>
                            </div>
                            @if(count($comments) > 0)
                            <ul class="comments-listing" >
                            	@foreach($comments as $key => $comment)
                                <li>
                                    <h5 class="theme-h5">{{ $comment->user->name }} <span class="date">{{ date('d/M/Y', strtotime($comment->created_at)) }}</span></h5>
                                    <p class="theme-p">{{ $comment->comment }}</p>
                                    <!-- <button class="theme-btn-2 reply-btn">reply</button> -->
                                    <!-- <div class="reply-box" style="display: none;">
                                        <form id="reply_comment">
                                        	@csrf
                                            <div class="input-field">
                                            	<input type="hidden" name="commentId" id="commentId" value="{{ $comment->comment_id }}" readonly>
                                                <textarea name="reply" id="reply" placeholder="Write Your Reply Here..."></textarea>
                                                <button type="submit" class="theme-btn">Post</button>
                                            </div>
                                        </form>                                        
                                    </div> -->
                                    <!-- <div class="reply-wrapper">
                                    	<ul class="comments-listing">
                                    		@foreach($reply as $rep)
                                    		@if($rep->comment_id == $comment->comment_id)
			                                <li>
			                                    <h5 class="theme-h5">{{ $rep->userName }} <span class="date">{{ date('d/M/Y', strtotime($rep->created_at)) }}</span></h5>
			                                    <p class="theme-p">{{ $rep->comment }}</p>
			                                </li>
			                                @endif
			                                @endforeach
                            			</ul>
                                    </div> -->
                                </li>
                                @endforeach
                            </ul>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<script>
	// Comment Work
	$(document).ready(function(){
		$("#comment-form").on('submit',function(e){
			e.preventDefault();

			var data = new FormData(this);

			$.ajaxSetup({
			    headers: {
			        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			    }
			});

			$.ajax({
				url: "{{ url('post_comment') }}",
				method: "POST",
				data: data,
				datatype: "json",
				contentType: false,
				processData: false,
				cache: false,
				success:function(data)
				{
					if(data.loginerror)
					{
						toastr.error(data.loginerror,"Error",{timeOut: 1500});
						$("#login").modal('show');
					}
					else if(data.posterror)
					{
						toastr.error(data.posterror,"Error",{timeOut: 1500});
						return false;
					}
					else if($.isEmptyObject(data.error))
					{
						toastr.success(data.success,"Added",{timeOut:1500});
						document.getElementById("comment-form").reset();
						window.location.reload();

					}
					else if(data.error.Comment)
					{
						toastr.error(data.error.Comment,"Error",{timeOut: 1500});
						return false;
					}
				},
				error:function()
				{
					toastr.error("SomeThing Went Wrong","Error",{timeOut:1500});
					return false;
				},
			});
		});
	});
	// Comment Work End Here

	// Reply Comment
	$(document).ready(function(){
		$("#reply_comment").on('submit',function(e){
			e.preventDefault();

			var data = new FormData(this);

			$.ajaxSetup({
			    headers: {
			        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			    }
			});

			$.ajax({
				url: "{{ url('reply_comment') }}",
				method: "POST",
				data: data,
				datatype: "json",
				contentType: false,
				processData: false,
				cache: false,
				success:function(data)
				{
					if(data.loginerror)
					{
						toastr.error(data.loginerror,"Error",{timeOut: 1500});
						$("#login").modal('show');
					}
					else if(data.commenterror)
					{
						toastr.error(data.commenterror,"Error",{timeOut: 1500});
						return false;
					}
					else if($.isEmptyObject(data.error))
					{
						toastr.success(data.success,"Added",{timeOut:1500});
						document.getElementById("reply_comment").reset();
						window.location.reload();
					}
					else if(data.error.reply)
					{
						toastr.error(data.error.reply,"Error",{timeOut: 1500});
						return false;
					}
				},
				error:function()
				{
					toastr.error("SomeThing Went Wrong","Error",{timeOut:1500});
					return false;
				},
			});
		});
	});
	// Reply Comment End Here
</script>

<x-main.footer />