@extends('layouts.client')

@push('meta_title')
    {{ $news_details->title }}
@endpush

@push('meta_description')
    {{ $news_details->excerpt }}
@endpush

@push('open_graph')
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
    <meta property="og:url"           content="{{ url()->current() }}" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="{{ $news_details->title }}" />
    <meta property="og:description"   content="{{ $news_details->excerpt }}" />
    <meta property="og:image"         content="{{ $news_details->image_file }}" />
@endpush

@push('styles')
	<style>
		.show-read-more .more-text{
			display: none;
		}

		.post-context {
			flex-flow: wrap;
		}
		
		.post-content img {
			max-width: 100%;
			height: auto;
		}

		.newest-post {
			width: 100px;
			height: 80px;
			object-fit: cover;
			border-radius: 8px;
		}

		.tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-bottom .tox-editor-header {
			border-top: none !important;
		}
		.tox .tox-tbtn svg {
			fill: #6e747a !important;
		}
	</style>
@endpush

@section('content')
	<section class="pb-5">
		<div class="container">
			<div class="row pt-4 g-5">
				<div class="col-xl-8 col-lg-8">
					<span class="badge bg-dark mb-3">{{ $news_details->category->name }}</span>

					<h1 class="post-title">{{ $news_details->title }}</h1>

					<div class="post-context">
						<span class="post-author">By: {{ $news_details->author }}</span>
						<span class="dot"></span>
						<span class="post-date">{{ $news_details->date_format }}</span>
						<span class="dot"></span>
						@foreach ($news_details->views as $view)
							<span class="post-date">{{ $view->views }} views</span>
						@endforeach
						<span class="dot"></span>
						<span class="post-date">{{ Str::readDuration($news_details->title . '' . $news_details->content). ' minutes read' }}</span>
					</div>

					<img data-src="{{ $news_details->image_file }}" class="post-thumbnail lozad" alt="" />

					<div class="mt-5 post-content">
						{!! $news_details->content !!}
					</div>

					<div class="row g-4 mt-5" id="comments">
						<div class="col-xl-12 mt-5">
							<h4 class="fw-bold">Post a comment</h4>
							<div class="d-flex align-items-center mt-4 mb-3">
								<div class="flex-shrink-0">
									<div class="profile-comment-avatar">{{ auth()->user()->initials ?? 'A' }}</div>
								</div>
								<div class="flex-grow-1 ms-3">
									<h6 class="m-0">{{ auth()->user()->name ?? 'Anonymous' }}</h6>
									<span class="text-muted small">@auth{{ '@'.auth()->user()->username }}@else @anonymous @endauth</span>
								</div>
							</div>
							<form action="{{ route('comment.store') }}" method="POST">
								@csrf
								<input type="hidden" name="publication_id" value="{{ encrypt($news_details->id) }}">
								<div class="form-group">
									<textarea class="form-control comment-editor @error('comment')is-invalid @enderror" name="comment" cols="30" rows="3" placeholder="What are your thoughts?" maxlength="1000" required aria-multiline="true">{{ old('comment') }}</textarea>

									@error('comment')
										<span class="invalid-feedback" role="alert">{{ $message }}</span>
									@enderror
								</div>
								<button type="submit" class="btn btn-dark float-end mt-3">Publish Comment</button>
							</form>
						</div>

						@if($comments->count())
							<div class="col-xl-12">
								<h5 class="fw-bold m-0">Responses ({{ $comments->count() }})</h5>
							</div>

							@foreach ($comments as $comment)
								<div class="col-xl-12">
									<div class="comment-item">
										<div class="d-flex align-items-center mb-3">
											<div class="flex-shrink-0">
												<div class="profile-comment-avatar">{{ $comment->user->initials ?? 'A' }}</div>
											</div>
											<div class="d-grid flex-grow-1 ms-3">
												<span class="profile-comment-name">{{ $comment->user->name ?? 'Anonymous' }}</span>
												<span class="profile-comment-date">{{ Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</span>
											</div>
											@canany(['isViewer', 'isAuthor', 'isCreator'])
												@if ($comment->user_id == auth()->id())
													<div class="dropdown dropstart">
														<button class="btn btn-default" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
															<i class='bx bx-dots-vertical-rounded bx-xs'></i>
														</button>
														<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
															<li><a class="dropdown-item edit-comment" href="javascript:void(0);" data-id="{{ encrypt($comment->id) }}" data-comment="{{ $comment->comment }}">Edit Comment</a></li> 
															<li><a class="dropdown-item delete-comment" href="javascript:void(0);" data-id="{{ encrypt($comment->id) }}">Delete</a></li>
														</ul>
													</div>
												@endif
											@endcanany
										</div>
										<div class="comment-details">
											<div class="show-read-more autolink">{!! Helper::auto_link($comment->comment) !!}</div>
										</div>
										<div class="d-flex justify-content-between align-items-center">
											<span class="text-muted small d-flex align-items-center gap-2"><i class='bx bx-message-square-dots bx-xs'></i> {{ $comment->replies->count() }} reply</span>
											@auth
												@canany(['isViewer', 'isAuthor', 'isCreator'])
													<button type="button" class="btn btn-default border d-flex align-items-center gap-2 justify-content-center text-muted reply" data-id="{{ encrypt($comment->id) }}" data-reply-to="{{ $comment->user->name ?? 'Anonymous' }}"><i class="bx bx-reply bx-sm"></i> Reply</button>
												@endcanany
											@endauth
										</div>
									</div>
								</div>
								@foreach ($comment->replies->sortByDesc('created_at') as $reply)
									<div class="col-xl-12" id="replies">
										<div class="comment-reply-item">
											<div class="d-flex align-items-center mb-3">
												<div class="flex-shrink-0">
													<div class="profile-comment-avatar bg-warning">{{ $reply->user->initials ?? 'A' }}</div>
												</div>
												<div class="d-grid flex-grow-1 ms-3">
													<span class="profile-comment-name">{{ $reply->user->name ?? 'Anonymous' }} @if($reply->user->role_id == 4)<span class="badge bg-success ms-2">Author</span>@endif</span>
													<span class="profile-comment-date">{{ Carbon\Carbon::parse($reply->created_at)->diffForHumans() }}</span>
												</div>
												@canany(['isAuthor', 'isCreator',  'isViewer'])
													@if ($reply->user_id == auth()->id())
														<div class="dropdown dropstart">
															<button class="btn btn-default" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
																<i class='bx bx-dots-vertical-rounded bx-xs'></i>
															</button>
															<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
																<li><a class="dropdown-item edit-reply" href="javascript:void(0);" data-id="{{ encrypt($reply->id) }}" data-reply="{{ $reply->reply }}"><i class="bi bi-pencil"></i> Edit Reply</a></li>
																<li><a class="dropdown-item delete-reply" href="javascript:void(0);" data-id="{{ encrypt($reply->id) }}"><i class="bi bi-trash"></i> Delete</a></li>
															</ul>
														</div>
													@endif
												@endcanany
											</div>
											<div class="comment-reply-details">
												<div class="show-read-more autolink">{!! Helper::auto_link($reply->reply) !!}</div>
											</div>
										</div>
									</div>
								@endforeach
							@endforeach


							<div class="col-xl-12">
								<div class="d-flex justify-content-start mt-3">
									{{ $comments->withQueryString()->links() }}
								</div>
							</div>
						@endif
					</div>
				</div>
				
				<div class="col-xl-4 col-lg-4">
					<div class="card sticky-top" style="top: 100px;">
						<div class="card-body">
							<div class="row g-4">
								<div class="col-xl-12">
									<h5 class="fw-bold">Categories</h5>
		
									<ul class="list-group py-3">
										@foreach ($categories as $category)
											<li class="list-group-item list-group-item-action py-3">
												<a href="{{ route('news.category', $category->category_permalink) }}" class="text-decoration-none d-flex align-items-center gap-3"><i class="bx {{ $category->icon ?? 'bxs-category-alt' }} bx-sm text-muted"></i> {{ $category->name }}</a>
											</li>
										@endforeach
									</ul>
								</div>
								<div class="col-xl-12">
									<h5 class="fw-bold">Newest Posts</h5>
								</div>
		
								@foreach ($news as $value)
									@if ($value->id != $news_details->id)
										<div class="col-xl-12 col-md-12">
											@php
												if ($value->meta_link != NULL) {
													$permalink = $value->meta_link;
													$redirect_attribute = 'target="_blank" rel="noopener noreferrer"';
												} else {
													$permalink = route('news.view', $value->permalink);
													$redirect_attribute = NUll;
												}
											@endphp
											<a href="{{ $permalink }}" class="text-decoration-none" {{ $redirect_attribute }}>
												<div class="d-flex align-items-center">
													<div class="flex-shrink-0">
														<img data-src="{{ $value->image_file }}" class="newest-post lozad" alt="">
													</div>
													<div class="flex-grow-1 ms-3">
														<h6 class="text-dark fw-bold">{{ Str::of($value->title)->limit(70) }}</h6>
														<span class="text-muted small">{{ \Carbon\Carbon::parse($value->created_at)->isoFormat('MMMM D, YYYY') }}</span>
													</div>
												</div>
											</a>
										</div>
									@endif	
								@endforeach
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection

@push('modals')
	<!-- Modal -->
	<div class="modal fade" id="replyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('reply.store') }}">
                    @csrf
                    <input type="hidden" class="form-control" name="publication_comment_id" id="comment_id">
                    <div class="modal-body">
                        <div class="form-group">
							<label for="reply" class="form-label">Replying to <span class="fw-bold" id="replying_to"></span></label>
							<textarea class="form-control comment-editor @error('reply')is-invalid @enderror" name="reply" rows="6" placeholder="What are your thoughts?" maxlength="1000">{{ old('reply') }}</textarea>
					
							@error('reply')
								<span class="invalid-feedback" role="alert">{{ $message }}</span>
							@enderror
						</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default border" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Respond</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
	<!-- Modal -->
	<div class="modal fade" id="editCommentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('comment.update') }}">
					@method('PUT')
                    @csrf
                    <input type="hidden" class="form-control" name="id" id="ed_comment_id">
                    <div class="modal-body">
                        <div class="form-group">
							<label for="comment" class="form-label">Edit Comment</label>
							<textarea id="ed_comment" class="form-control @error('comment')is-invalid @enderror" name="comment" rows="6" placeholder="What are your thoughts?" maxlength="1000" required>{{ old('comment') }}</textarea>
					
							@error('comment')
								<span class="invalid-feedback" role="alert">{{ $message }}</span>
							@enderror
						</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default border" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Apply Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
	<!-- Modal -->
    <div class="modal fade" id="deleteReplyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('reply.delete') }}">
                    @method('DELETE')
                    @csrf
                    <input type="hidden" class="form-control" name="id" id="reply_id">
                    <div class="modal-body">
                        <p>Are you sure you want to delete your reply?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default border" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="deleteCommentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('comment.delete') }}">
                    @method('DELETE')
                    @csrf
                    <input type="hidden" class="form-control" name="id" id="del_comment_id">
                    <div class="modal-body">
                        <p>Are you sure you want to delete this comment?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default border" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
	<div class="modal fade" id="editReplyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('reply.update') }}">
					@method('PUT')
                    @csrf
                    <input type="hidden" class="form-control" name="id" id="ed_reply_id">
                    <div class="modal-body">
                        <div class="form-group">
							<label for="reply" class="form-label">Edit Reply</label>
							<textarea id="ed_reply" class="form-control @error('reply')is-invalid @enderror" name="reply" rows="6" placeholder="What are your thoughts?" maxlength="1000" required>{{ old('reply') }}</textarea>
					
							@error('reply')
								<span class="invalid-feedback" role="alert">{{ $message }}</span>
							@enderror
						</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default border" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Apply Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
	{{-- <script src="https://cdn.tiny.cloud/1/zzubw4vq5fyaxdgpcaxa4zcfx43wyxc62zr3ii3a73exoddc/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
	<script>
		tinymce.init({
			selector: 'textarea.comment-editor',
			skin: 'naked',
			toolbar_location: 'bottom',
			plugins: 'lists link emoticons',
			toolbar: 'bold italic underline strikethrough bullist numlist link emoticons',
			link_context_toolbar: true,
			menubar: false,
			statusbar: false,
			height: 120
		});
	</script> --}}
	<script src="{{ mix('js/autolinker.js') }}"></script>
	<script type="text/javascript">
        $(document).on('click', '.reply', function() {
            $('#comment_id').val($(this).data('id'));
            $('#replying_to').text($(this).data('reply-to'));
            $('#replyModal').modal('show');
        });
    </script>
	<script type="text/javascript">
		$(document).on('click', '.edit-comment', function() {
			$('#ed_comment_id').val($(this).data('id'));
			$('#ed_comment').val($(this).data('comment'));
			$('#editCommentModal').modal('show');
		});
	</script>
	<script type="text/javascript">
		$(document).on('click', '.delete-comment', function() {
			$('#del_comment_id').val($(this).data('id'));
			$('#deleteCommentModal').modal('show');
		});
	</script>
	<script type="text/javascript">
		$(document).on('click', '.delete-reply', function() {
			$('#reply_id').val($(this).data('id'));
			$('#deleteReplyModal').modal('show');
		});
	</script>
	<script type="text/javascript">
		$(document).on('click', '.edit-reply', function() {
			$('#ed_reply_id').val($(this).data('id'));
			$('#ed_reply').val($(this).data('reply'));
			$('#editReplyModal').modal('show');
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function(){
			let maxLength = 300;
			$(".show-read-more").each(function() {
				let myStr = $(this).text();

				if ($.trim(myStr).length > maxLength) {
					let newStr = myStr.substring(0, maxLength);
					let removedStr = myStr.substring(maxLength, $.trim(myStr).length);
					$(this).empty().html(newStr);
					$(this).append(' <a href="javascript:void(0);" class="read-more fw-bold text-decoration-none">... Read more</a>');
					$(this).append('<span class="more-text">' + removedStr + '</span>');
				}
			});
			
			$(".read-more").click(function(){
				$(this).siblings(".more-text").contents().unwrap();
				$(this).remove();
			});
		});
	</script>
@endpush