@extends($activeTemplate . 'layouts.frontend')
@section('content')
    <section class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-area-content">
                <div class="breadcrumb-area-info">
                    <span class="breadcrumb-area-info-text">
                        @lang('Published on') {{ showDateTime($knowledge->created_at, 'F d, Y') }}
                    </span>
                </div>
                <h3 class="breadcrumb-area-title">{{ __($knowledge->title) }}</h3>
            </div>
        </div>
    </section>

    <section class="knowledge-base-details py-60">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-9 col-md-10">
                    <div class="knowledge-base-content">
                        @if ($knowledge->subtitle)
                            <h6 class="mb-4">{{ __($knowledge->subtitle) }}</h6>
                        @endif
                        <div class="knowledge_base_body">
                            @php
                                echo $knowledge->description;
                            @endphp
                        </div>

                        <div class="knowledge-details-comment">
                            <form action="{{ route('user.knowledge.comment.store', $knowledge->id) }}" method="POST" class="mb-4">
                                @csrf
                                <h6 class="mb-3">@lang('Write Your Comment')</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control form--control" name="comment" value="{{ old('comment') }}" required>
                                    <button class="input-group-text">@lang('Comment')</button>
                                </div>
                            </form>

                            <div class="allComment">

                            </div>

                            <div class="my-3 text-center d-none">
                                <button class="btn btn--base btn--sm loadMore">
                                    <i class="las la-spinner"></i>
                                    @lang('Load More')
                                </button>
                            </div>
                        </div>

                        <div class="knowledge-base-action">
                            <div class="knowledge-comment-react m-0">
                                <button class="react-item reactBtn likeBtn {{ $isLikeDislike?->type == 'like' ? 'active' : '' }}" data-type="like" type="button">
                                    <span class="icon">
                                        @include('admin.partials.svg.like')
                                    </span>
                                    <span class="count likeCount">{{ $knowledge->likes_count }}</span>
                                </button>
                                <button class="react-item reactBtn dislikeBtn {{ $isLikeDislike?->type == 'dislike' ? 'active' : '' }}" data-type="dislike" type="button">
                                    <span class="icon">
                                        @include('admin.partials.svg.dislike')
                                    </span>
                                    <span class="count dislikeCount">{{ $knowledge->dislikes_count }}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <form action="{{ route('user.knowledge.comment.store', $knowledge->id) }}" method="POST" class="d-none replyForm">
        @csrf
        <input type="hidden" name="comment">
        <input type="hidden" name="comment_id">
    </form>
@endsection

@push('style')
    <style>
        .knowledge-base-content ul {
            list-style: circle;
            padding-left: 20px;
            margin-bottom: 20px;
        }

        .knowledge-base-content ul li {
            margin-bottom: 10px;
        }

        .knowledge-base-content p,
        .knowledge-base-content h1,
        .knowledge-base-content h2,
        .knowledge-base-content h3,
        .knowledge-base-content h4,
        .knowledge-base-content h5,
        .knowledge-base-content h6 {
            margin-bottom: 1.5rem !important;
        }
    </style>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";
            $(document).on('click', '.replyBtn', function() {
                $('.replyArea').addClass('d-none');
                $(this).closest('.replyComment').find('.replyArea').removeClass('d-none');
            });

            $(document).on('keypress', '.replyText', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $(this).closest('.replyArea').find('.replySubmit').click();
                }
            });

            $(document).on('click', '.replySubmit', function() {
                let quote = $(this).closest('.replyArea').find('.replyText').val();
                $('.replyForm').find('[name=comment]').val(quote);
                $('.replyForm').find('[name=comment_id]').val($(this).data('comment_id'));
                $('.replyForm').submit();
            });

            $(document).on('click', '.viewAllReplyBtn', function() {
                let $replyBoxes = $(this).closest('.replyComment').find('.replyBox');
                if ($replyBoxes.hasClass('d-none')) {
                    $replyBoxes.removeClass('d-none');
                    $(this).text(`@lang('Hide all replies')`);
                } else {
                    $replyBoxes.addClass('d-none');
                    $(this).text(`@lang('View all replies')`);
                }
            });

            let currentPage = 1;
            $(document).on('click', '.loadMore', function() {
                let url = "{{ route('knowledge.comment.load', $knowledge->id) }}?page=" + currentPage;
                let $btn = $(this);
                $btn.attr('disabled', true).find('i').addClass('la-spin');
                $.get(url, function(res) {
                    $btn.attr('disabled', false).find('i').removeClass('la-spin');
                    if (res.status == 'success') {
                        $('.allComment').append(res.html);
                        if (res.is_last_page) {
                            $btn.parent().remove();
                            return false;
                        }

                        if (currentPage == 1) {
                            $btn.parent().removeClass('d-none');
                        }

                        currentPage++;
                    }
                }).fail(function() {
                    $btn.attr('disabled', false).find('i').removeClass('la-spin');
                });
            });

            $('.loadMore').trigger('click');

            // like and dislike

            $(document).on('click', '.reactBtn', function() {
                let type = $(this).data('type');
                let $btn = $(this);

                {{-- blade-formatter-disable --}}
                
                @if (!auth()->check())
                    notify('error', 'Login required to like and dislike');
                    return;
                @endif

                {{-- blade-formatter-enable --}}


                $.ajax({
                    url: "{{ route('user.knowledge.like.dislike.store', $knowledge->id) }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        type: type
                    },
                    success: function(res) {
                        if (res.status == 'success') {
                            $btn.toggleClass('active');
                            if (res.like_dislike && res.like_dislike.type == 'like') {
                                $('.likeBtn').addClass('active');
                                $('.dislikeBtn').removeClass('active');
                            } else if (res.like_dislike && res.like_dislike.type == 'dislike') {
                                $('.dislikeBtn').addClass('active');
                                $('.likeBtn').removeClass('active');
                            } else {
                                $('.likeBtn').removeClass('active');
                                $('.dislikeBtn').removeClass('active');
                            }
                            $('.likeCount').text(res.like_count);
                            $('.dislikeCount').text(res.dislike_count);
                        }
                    }
                });
            });

            $.ajax({
                url: "{{ route('knowledge.view.count.store', $knowledge->id) }}",
                type: "GET"
            });

            document.querySelectorAll('ol').forEach(function(ol) {
                let ul = document.createElement('ul');
                ul.classList.add('mb-4');

                ol.querySelectorAll('li').forEach(function(li) {
                    let newLi = document.createElement('li');
                    newLi.textContent = li.textContent.trim();
                    ul.appendChild(newLi);
                });

                ol.parentNode.replaceChild(ul, ol);
            });

        })(jQuery);
    </script>
@endpush
